/* ============================================================
   PERA DIJITAL — page.css
   Shared inner-page chrome. Loaded after main.css on every page
   below the root (cozumlerimiz/*, referanslarimiz/). Rules that
   both page types render live in main.css; nothing is duplicated.
   Order mirrors main.css: page scaffolding, components in DOM
   order, media queries.
   ============================================================ */

/* ============================================================
   PAGE SCAFFOLDING
   ============================================================ */

/* One sticky bar per page: the section nav owns the top edge, so the
   shared header is static here and anchors clear the nav instead. */
.page-service {
  --section-nav-h: 3.5rem;
  --header-clearance: calc(var(--section-nav-h) + var(--sp-3));
}

/* Not sticky here, but still positioned: without a stacking context above
   the section nav, the solutions dropdown would paint underneath it. */
.page-service .site-header {
  position: relative;
  z-index: var(--z-header-open);
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.service-hero__inner,
.section-nav__inner,
.band__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: var(--sp-section);
  /* Set directly, not only via :target, so smooth scrolls and the spy can
     never race the pseudo-class. */
  scroll-margin-top: var(--header-clearance);
}

.band--dark {
  background: var(--ink);
  color: var(--ink-invert);
}

.band--dark .section-title { color: var(--ink-invert); }
.band--dark .section-lede { color: var(--ink-invert-muted); }
.band--dark :focus-visible { outline-color: var(--focus-ring-invert); }

/* ---- Eyebrow pill: the recurring section marker ---- */
.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 0.375rem 0.875rem;
  background: #ece4fa;              /* accent at ~12% over white, flattened */
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: var(--wt-bold);
  border-radius: var(--radius-button);
}

.eyebrow--invert {
  background: rgb(178 130 245 / 0.16);
  color: var(--accent-light);
}

/* ---- Two-column band layout, columns set per modifier ---- */
.split {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.split--wide-right { --split-cols: 1fr 1.4fr; }
.split--narrow-left { --split-cols: 0.9fr 1.1fr; }

.split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.prose { max-width: 58ch; }

.prose p:not(:first-child) { margin-top: var(--sp-3); }

/* Text-led pages: long body copy under a full-width image. The heading
   block and the body share one centred column at a reading measure (~70
   characters of Turkish per line), so the page has a single axis and only
   the image runs wide. Both set the reading size on the wrapper so their
   ch widths resolve identically. Text stays left-aligned inside. */
.intro--centered,
.prose--centered {
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--fs-body-lg);
}

.intro--centered .intro__lede { max-width: none; }

/* Text-only service heroes (no image slot): no grid, so the grid's top
   margin moves onto the content block. Left-aligned like every other hero. */
.service-hero__inner > .service-hero__content { margin-top: var(--sp-4); }

/* ---- Text band + summary panel ----
   Body copy on the left at its normal measure, a quiet reference panel on
   the right. Side by side only from the nav tier (64rem) up; below that the
   panel is an ordinary block under the text. Sticky only when the viewport
   is tall enough to show the whole panel under the section nav (see the
   media query at the end of MEDIA QUERIES). Content comes from the page's
   $summaries data via assets/inc/summary.php. */
.with-summary {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.summary {
  padding: var(--sp-4);
  background: var(--surface-tint);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-card);
}

.summary__block + .summary__block {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--hairline) solid var(--rule);
}

.summary__title {
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: var(--wt-bold);
}

.summary__list {
  margin-top: var(--sp-1);
  padding-left: 1.125rem;
  list-style: disc;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.summary__list li + li { margin-top: 0.375rem; }

.summary__list li::marker { color: var(--accent); }

@media (min-width: 64rem) {

  .with-summary {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--sp-10);
  }
}

/* Height floor: tallest panel on the site plus the section nav and its
   offset. Shorter viewports keep the panel in flow rather than pin a box
   whose bottom would sit off-screen. Re-measure when a panel grows. */
@media (min-width: 64rem) and (min-height: 46rem) {

  .summary {
    position: sticky;
    top: calc(var(--section-nav-h) + var(--sp-4));
  }
}

/* Under a centred section head, the body starts a band's worth of air below
   the lede, matching what .pillars and .faq-grid do in the same position. */
.centered-head + .prose--centered { margin-top: var(--sp-8); }

.prose--centered { line-height: var(--lh-prose); }

.prose--centered p:not(:first-child) { margin-top: var(--sp-4); }

.centered-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.centered-head .section-lede { max-width: 52ch; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--accent);
  font-weight: var(--wt-bold);
  text-underline-offset: 0.25em;
}

.text-link:hover { color: var(--accent-pressed, var(--ink)); }

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  font-size: var(--fs-caption);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.breadcrumb__sep {
  color: var(--ink-muted);
  transform: rotate(-90deg);
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--ink-muted);
  text-decoration: none;
}

.breadcrumb__link:hover { color: var(--accent); }

.breadcrumb__current {
  color: var(--ink);
  font-weight: var(--wt-medium);
}

/* ============================================================
   SERVICE HERO
   ============================================================ */

.service-hero {
  background: var(--surface-tint);
  padding-block: 0 var(--sp-8);
}

.service-hero__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-4);
}

.service-hero__title {
  color: var(--ink);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

/* The reference's signature: a short heavy line over a longer medium one. */
.service-hero__title-main {
  display: block;
  font-size: var(--fs-display);
  font-weight: var(--wt-heavy);
}

.service-hero__title-sub {
  display: block;
  margin-top: 0.3em;
  font-size: var(--fs-h2);
  font-weight: var(--wt-medium);
}

.service-hero__lede {
  margin-top: var(--sp-3);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-h3);
  max-width: var(--measure-hero);
}

.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
}

.service-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* ------------------------------------------------------------
   Performance ads hero: floating operations board
   Scoped to .ad-ops, so the other service heroes keep their images.
   ------------------------------------------------------------ */

/* The board decides its own layout from its own width. */
.service-hero__media--ops { container: ad-ops / inline-size; }

.ad-ops {
  margin: 0;
  color: var(--ink-muted);
}

/* Narrow first: a clean column with the cards nudged alternately left and
   right, so the stack still reads as loose cards rather than a list. */
.ad-ops__stage {
  position: relative;
  display: grid;
  gap: 0.75rem;
}

.ad-ops__links { display: none; }

.ops-card {
  position: relative;
  z-index: 1;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: var(--hairline) solid rgb(19 19 19 / 0.14);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.05), 0 14px 30px -20px rgb(19 19 19 / 0.4);
  transition: transform var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}

.ops-card:hover {
  transform: translateY(-2px);
  border-color: rgb(111 59 221 / 0.55);
}

.ops-card--main     { margin-right: 1.25rem; }
.ops-card--creative { margin-left: 1.25rem; }
.ops-card--tracking { margin-right: 1.25rem; }
.ops-card--budget   { margin-left: 1.25rem; }
.ops-card--platforms { justify-self: start; }

.ops-card__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.ops-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: var(--accent);
  background: var(--surface-tint);
  border-radius: var(--radius-button);
}

.ops-card__icon svg,
.ops-point svg[viewBox] { fill: none; }

.ops-card__title {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: var(--wt-bold);
  line-height: var(--lh-h3);
}

/* ---- Status "Aktif" ---- */
.ops-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-left: auto;
  padding: 0.1875rem 0.5625rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: var(--wt-bold);
  background: var(--surface-tint);
  border-radius: 999px;
}

.ops-status__dot {
  position: relative;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--accent);
  border-radius: 50%;
}

.ops-pill {
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  color: var(--surface);
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  letter-spacing: 0.04em;
  background: var(--ink);
  border-radius: 999px;
}

/* ---- Campaign types and setup rows ---- */
.ops-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-top: 0.75rem;
}

.ops-tag {
  padding: 0.1875rem 0.5625rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: var(--wt-medium);
  border: var(--hairline) solid rgb(19 19 19 / 0.16);
  border-radius: 999px;
}

.ops-rows {
  display: grid;
  margin-top: 0.75rem;
}

.ops-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.4375rem;
  font-size: 0.8125rem;
  border-top: var(--hairline) solid var(--rule);
}

.ops-row__name { color: var(--ink); }

.ops-row__state {
  font-size: 0.75rem;
  font-weight: var(--wt-medium);
}

.ops-row__state::before {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.375rem;
  vertical-align: 0.0625rem;
  background: rgb(19 19 19 / 0.35);
  border-radius: 50%;
}

.ops-row__state--accent { color: var(--accent); }
.ops-row__state--accent::before { background: var(--accent); }

/* ---- Creative thumbnails: abstract compositions, never real ads ---- */
.ops-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ops-thumb {
  display: grid;
  gap: 0.3125rem;
  justify-items: center;
}

.ops-thumb__art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-tint);
  border: var(--hairline) solid rgb(19 19 19 / 0.12);
  border-radius: 0.5rem;
}

.ops-thumb__art::before,
.ops-thumb__art::after {
  content: "";
  position: absolute;
  border-radius: 0.1875rem;
}

.ops-thumb__art--a::before { top: 16%; left: 16%; width: 36%; aspect-ratio: 1; background: var(--accent-light); border-radius: 50%; }
.ops-thumb__art--a::after  { left: 16%; bottom: 16%; width: 60%; height: 0.3125rem; background: var(--ink); box-shadow: 0 -0.5rem 0 rgb(19 19 19 / 0.3); }

.ops-thumb__art--b { background: var(--ink); border-color: var(--ink); }
.ops-thumb__art--b::before { top: 14%; right: 14%; width: 44%; height: 38%; background: var(--accent); }
.ops-thumb__art--b::after  { left: 14%; bottom: 16%; width: 56%; height: 0.3125rem; background: var(--surface); box-shadow: 0 -0.5rem 0 rgb(255 255 255 / 0.4); }

.ops-thumb__art--c { background: var(--surface); }
.ops-thumb__art--c::before { inset: 12% 12% 42% 12%; background: var(--surface-tint); }
.ops-thumb__art--c::after  { left: 12%; bottom: 16%; width: 44%; height: 0.75rem; background: var(--ink); border-radius: 999px; }

.ops-thumb__label {
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
}

/* The variant currently ahead: an outline and a filled letter. A test
   state, not a result. */
.ops-thumb--lead .ops-thumb__art { outline: 2px solid var(--accent); outline-offset: 2px; }

.ops-thumb--lead .ops-thumb__label {
  padding-inline: 0.375rem;
  color: var(--surface);
  background: var(--accent);
  border-radius: 999px;
}

/* ---- Conversion points ---- */
.ops-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.ops-point {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: var(--wt-medium);
  background: var(--surface-tint);
  border-radius: var(--radius-button);
}

.ops-point svg { flex: 0 0 auto; color: var(--accent); }

/* ---- Budget chart ---- */
.ops-chart {
  display: block;
  width: 100%;
  height: 3.25rem;
  margin-top: 0.75rem;
  overflow: visible;
}

.ops-chart__bar { fill: rgb(19 19 19 / 0.1); }
.ops-chart__bar--on { fill: var(--accent-light); }

.ops-chart__trend {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---- Platforms ---- */
.ops-card--platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem;
}

.ops-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.625rem;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: var(--wt-bold);
  white-space: nowrap;
  background: var(--surface-tint);
  border-radius: var(--radius-button);
}

.ops-platform__mark {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--ink);
  border-radius: 2px;
}

.ops-platform__mark--alt {
  background: var(--accent);
  border-radius: 50%;
}

/* ---- Wide enough: the floating board ------------------------------------
   Twelve columns, rows of 1rem. Cards are placed by their top-left corner
   and take their own height; the overlaps are planned onto empty areas —
   the right of the main card (its rows stop short), and card padding
   elsewhere — so no label is ever covered. */
@container ad-ops (min-width: 28rem) {
  .ad-ops__stage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(32, 1rem);
    gap: 0;
    padding: 0.5rem 0;
  }

  /* Faint dot grid under the cards: the board's surface, not decoration
     for its own sake. */
  .ad-ops__stage::before {
    content: "";
    position: absolute;
    inset: -0.5rem -0.5rem;
    background-image: radial-gradient(rgb(19 19 19 / 0.12) 1px, transparent 1.2px);
    background-size: 1.25rem 1.25rem;
    border-radius: var(--radius-panel);
    -webkit-mask-image: radial-gradient(ellipse at 55% 50%, #000 55%, transparent 85%);
            mask-image: radial-gradient(ellipse at 55% 50%, #000 55%, transparent 85%);
  }

  .ops-card { margin: 0; align-self: start; }

  .ops-card--platforms { grid-column: 7 / 13;  grid-row: 1;  justify-self: end; z-index: 2; }
  .ops-card--main      { grid-column: 1 / 10;  grid-row: 4;  }
  .ops-card--creative  { grid-column: 7 / 13;  grid-row: 12; z-index: 2; }
  .ops-card--tracking  { grid-column: 1 / 7;   grid-row: 17; z-index: 3; }
  .ops-card--budget    { grid-column: 5 / 11;  grid-row: 24; z-index: 4; }

  /* Square thumbnails on the board keep the creative card short enough
     that the budget card below only ever overlaps its padding. */
  .ops-thumb__art { aspect-ratio: 1; }

  /* The rows stop short of the card's right side, which is where the
     creative card lands. */
  .ops-card--main .ops-rows { max-width: 58%; }

  .ad-ops__links {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .ad-ops__links path {
    fill: none;
    stroke: var(--accent);
    stroke-opacity: 0.5;
    stroke-width: 1.25;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
  }
}

/* ---- Motion ---------------------------------------------------------------
   A slow drift on each card (the individual translate property, so hover's
   transform still adds its lift), a pulse on the live dot. Transform and
   opacity only; nothing moves under reduced motion or on the narrow stack. */
@media (prefers-reduced-motion: no-preference) {
  .ops-status__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    border-radius: 50%;
    animation: ops-pulse 2.4s var(--ease-out) infinite;
  }

  @container ad-ops (min-width: 28rem) {
    .ops-card { animation: ops-float 9s ease-in-out infinite; }
    .ops-card--platforms { animation-delay: -1.5s; }
    .ops-card--creative  { animation-delay: -3s; }
    .ops-card--tracking  { animation-delay: -4.5s; }
    .ops-card--budget    { animation-delay: -6s; }

    .ad-ops__links path { animation: ops-dash 2.2s linear infinite; }
  }
}

@keyframes ops-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

@keyframes ops-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

@keyframes ops-dash {
  to { stroke-dashoffset: -14; }
}

/* ------------------------------------------------------------
   Corporate web design hero: build board
   Wireframe → UI Design → Code → Live Site. Scoped to .build.
   ------------------------------------------------------------ */

.service-hero__media--build { container: build / inline-size; }

.build {
  margin: 0;
  color: var(--ink-muted);
}

/* Narrow first: a vertical flow, cards and down-arrows in reading order. */
.build__stage {
  position: relative;
  display: grid;
  gap: 0.5rem;
  justify-items: stretch;
}

.build__links { display: none; }

.build-card {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0, 1fr): without it the one column sizes to its content and the
     address bar pushes "Yayında" out of a narrow card. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  min-width: 0;
  padding: 0.75rem;
  background: var(--surface);
  border: var(--hairline) solid rgb(19 19 19 / 0.14);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.05), 0 14px 30px -20px rgb(19 19 19 / 0.4);
  transition: transform var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}

.build-card:hover {
  transform: translateY(-2px);
  border-color: rgb(111 59 221 / 0.55);
}

.build-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.build-card__title {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: var(--wt-bold);
  line-height: var(--lh-h3);
  white-space: nowrap;
}

.build-tag {
  padding: 0.125rem 0.5rem;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-medium);
  line-height: 1.5;
  white-space: nowrap;
  border: var(--hairline) solid rgb(19 19 19 / 0.16);
  border-radius: 999px;
}

.build-tag--accent {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
}

/* Arrows between cards: pointing down in the stacked flow. */
.build-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
  background: var(--surface);
  border: var(--hairline) solid rgb(111 59 221 / 0.4);
  border-radius: 50%;
  rotate: 90deg;
}

.build-arrow svg { fill: none; }

/* ---- The page sketch, shared by three cards ----------------------------
   One structure: nav, a hero with copy and an image, three blocks. The
   modifier decides whether it is drawn as grey outlines, as the finished
   design, or as the live page. */
.sketch {
  display: grid;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: 0.5rem;
}

.sketch__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sketch__logo {
  width: 1.25rem;
  height: 0.5rem;
  border-radius: 2px;
}

.sketch__links {
  display: flex;
  gap: 0.3125rem;
}

.sketch__links span {
  width: 1rem;
  height: 0.25rem;
  border-radius: 2px;
}

.sketch__hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0.5rem;
  align-items: center;
}

.sketch__copy {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
}

.sketch__h {
  width: 100%;
  height: 0.4375rem;
  border-radius: 2px;
}

.sketch__h--short { width: 70%; }

.sketch__p {
  width: 85%;
  height: 0.25rem;
  margin-top: 0.125rem;
  border-radius: 2px;
}

.sketch__btn {
  width: 2.5rem;
  height: 0.625rem;
  margin-top: 0.25rem;
  border-radius: 3px;
}

/* A fixed height rather than a ratio: in the wide live card a ratio made
   the picture, and the whole card, twice as tall as it needed to be. */
.sketch__img {
  height: 4.25rem;
  border-radius: 0.3125rem;
}

.sketch__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
}

.sketch__grid span {
  height: 1.375rem;
  border-radius: 0.25rem;
}

/* Wireframe: outlines on paper, the image as a crossed box. */
.sketch--wire {
  background: var(--surface);
  border: var(--hairline) dashed rgb(19 19 19 / 0.25);
}

.sketch--wire .sketch__logo,
.sketch--wire .sketch__links span,
.sketch--wire .sketch__h,
.sketch--wire .sketch__p { background: rgb(19 19 19 / 0.22); }

.sketch--wire .sketch__btn,
.sketch--wire .sketch__grid span { border: var(--hairline) solid rgb(19 19 19 / 0.3); }

.sketch--wire .sketch__img {
  border: var(--hairline) solid rgb(19 19 19 / 0.3);
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgb(19 19 19 / 0.22) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgb(19 19 19 / 0.22) 50%, transparent calc(50% + 0.5px));
}

/* UI design: the same layout in the brand's black, white and purple. */
.sketch--ui { background: var(--surface-tint); }

.sketch--ui .sketch__logo { background: var(--ink); }
.sketch--ui .sketch__links span { background: rgb(19 19 19 / 0.35); }
.sketch--ui .sketch__h { background: var(--ink); height: 0.5rem; }
.sketch--ui .sketch__p { background: rgb(19 19 19 / 0.3); }
.sketch--ui .sketch__btn { background: var(--accent); }

.sketch--ui .sketch__img {
  position: relative;
  background: var(--ink);
}

.sketch--ui .sketch__img::after {
  content: "";
  position: absolute;
  top: 22%;
  right: 18%;
  width: 34%;
  aspect-ratio: 1;
  background: var(--accent);
  border-radius: 50%;
}

.sketch--ui .sketch__grid span {
  background: var(--surface);
  border-top: 2px solid var(--accent);
}

/* Live: the finished page, quieter, in its window. */
.sketch--live {
  background: var(--surface);
  border-radius: 0 0 0.5rem 0.5rem;
}

.sketch--live .sketch__logo { background: var(--ink); }
.sketch--live .sketch__links span { background: rgb(19 19 19 / 0.25); }
.sketch--live .sketch__h { background: var(--ink); }
.sketch--live .sketch__p { background: rgb(19 19 19 / 0.22); }
.sketch--live .sketch__btn { background: var(--ink); }
.sketch--live .sketch__img { background: var(--surface-tint); border: var(--hairline) solid rgb(111 59 221 / 0.25); }
.sketch--live .sketch__grid span { background: var(--surface-tint); }

/* ---- Code card ---------------------------------------------------------- */
.build-card--code {
  background: var(--ink);
  border-color: var(--ink);
}

.build-card--code .build-card__title { color: var(--ink-invert); }

.build-files {
  display: flex;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}

.build-file {
  padding: 0.125rem 0.4375rem;
  color: var(--ink-invert-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  white-space: nowrap;
  border-radius: 0.25rem;
}

.build-file--on {
  color: var(--ink-invert);
  background: rgb(255 255 255 / 0.1);
}

/* 12px monospace and never smaller, on every width: the lines are short
   enough to fit a phone rather than being shrunk to fit. */
.code {
  display: grid;
  gap: 0.125rem;
  color: var(--ink-invert-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: pre;
}

/* Block lines, not flex: a flex line would drop the plain spaces between
   its spans and print "<headerclass=". */
.code__line { display: block; }

.code__n {
  display: inline-block;
  width: 1.25rem;
  color: rgb(255 255 255 / 0.3);
}

.code__in { display: inline-block; width: 2ch; }
.code__t,
.code__p { color: var(--accent-light); }
.code__a { color: #e9e3f7; }
.code__s { color: var(--ink-invert); }
.code__k { color: var(--accent-light); font-weight: var(--wt-bold); }

.code__cursor {
  display: inline-block;
  width: 0.4375rem;
  height: 0.9375rem;
  margin-left: 0.125rem;
  vertical-align: -0.1875rem;
  background: var(--accent-light);
}

/* ---- Live site window --------------------------------------------------- */
.build-card--live { gap: 0; padding: 0; overflow: hidden; }

.build-bar {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.625rem;
  color: rgb(19 19 19 / 0.55);
  border-bottom: var(--hairline) solid var(--rule);
}

.build-bar svg { flex: 0 0 auto; fill: none; }

.build-bar__url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 0.1875rem 0.5rem;
  color: var(--ink);
  font-size: 0.6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-tint);
  border-radius: 999px;
}

.build-live {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  white-space: nowrap;
}

.build-live__dot {
  position: relative;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--accent);
  border-radius: 50%;
}

.build-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  padding: 0 0.625rem 0.625rem;
}

/* ---- Wide enough: the Z-shaped board ------------------------------------
   24 columns, one-rem rows. Top row: Wireframe, then UI Design lower and to
   the right, overlapping the wireframe card's empty right side. Bottom row:
   Code, then Live Site overlapping the short-lined right of the code card.
   Connectors run in the same units. */
@container build (min-width: 28rem) {
  .build__stage {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: repeat(34, 1rem);
    gap: 0;
  }

  .build__stage::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    background-image: radial-gradient(rgb(19 19 19 / 0.12) 1px, transparent 1.2px);
    background-size: 1.25rem 1.25rem;
    border-radius: var(--radius-panel);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
  }

  .build-card { align-self: start; }

  .build-card--wire { grid-column: 1 / 14;  grid-row: 1;  }
  .build-card--ui   { grid-column: 12 / 25; grid-row: 6;  z-index: 2; }
  .build-card--code { grid-column: 1 / 12;  grid-row: 17; z-index: 3; }
  .build-card--live { grid-column: 10 / 25; grid-row: 21; z-index: 4; }

  /* The wireframe page is drawn narrower than its card, leaving the right
     edge free for the UI card to land on. */
  .build-card--wire .sketch { width: 80%; }

  .build__links {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .build__link--narrow { display: none; }

  .build__link {
    fill: none;
    stroke: var(--accent);
    stroke-opacity: 0.55;
    stroke-width: 1.25;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
  }

  /* Arrowheads sit where each connector enters its card. */
  .build-arrow {
    z-index: 5;
    width: 1.25rem;
    height: 1.25rem;
    align-self: center;
  }

  .build-arrow--1 { grid-column: 18; grid-row: 6; justify-self: start; margin-left: -0.625rem; align-self: start; margin-top: -0.625rem; rotate: 90deg; }
  .build-arrow--2 { grid-column: 7;  grid-row: 17; justify-self: start; margin-left: -0.625rem; align-self: start; margin-top: -0.625rem; rotate: 90deg; }
  .build-arrow--3 { grid-column: 10; grid-row: 31; justify-self: start; margin-left: -0.625rem; align-self: start; margin-top: -0.625rem; rotate: 0deg; }
}

/* Narrow board — the desktop column between roughly 960 and 1150px. The code
   card is too narrow here to have the live window resting on its right side,
   so the window moves clear of it, the second file tab goes, and the last
   connector swaps for the one that reaches the window's new edge. */
@container build (min-width: 28rem) and (max-width: 35.99rem) {
  .build-card--live { grid-column: 12 / 25; }
  .build-card--code { padding-inline: 0.625rem; }
  .code__n { width: 1rem; }
  .build-file:not(.build-file--on) { display: none; }

  .build__link--wide { display: none; }
  .build__link--narrow { display: inline; }
  .build-arrow--3 { grid-column: 12; }
}

/* ---- Motion ---------------------------------------------------------------
   Three small things: the Wireframe → UI connector flows, the code cursor
   blinks, the live dot pulses. Nothing else moves; all of it stops under
   reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .build__link--live { animation: build-dash 2s linear infinite; }

  .code__cursor { animation: build-blink 1.1s steps(1, end) infinite; }

  .build-live__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    border-radius: 50%;
    animation: ops-pulse 2.4s var(--ease-out) infinite;
  }
}

@keyframes build-dash {
  to { stroke-dashoffset: -14; }
}

@keyframes build-blink {
  50% { opacity: 0; }
}

/* ------------------------------------------------------------
   E-commerce setup hero: store setup timeline
   Store → Products → Payment → Shipping → E-invoice → live. Scoped to .shop.
   ------------------------------------------------------------ */

.service-hero__media--shop { container: shop / inline-size; }

.shop {
  margin: 0;
  color: var(--ink-muted);
}

/* Narrow first: a timeline. The spine runs down the left, each card pinned
   to it by its node. */
.shop__stage {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding-left: 1.75rem;
}

.shop__spine {
  position: absolute;
  top: 1.25rem;
  bottom: 3rem;
  left: 0.5625rem;
  width: 2px;
  background-image: repeating-linear-gradient(to bottom, var(--accent) 0 5px, transparent 5px 10px);
  opacity: 0.55;
}

.shop-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface);
  border: var(--hairline) solid rgb(19 19 19 / 0.14);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.05), 0 14px 30px -20px rgb(19 19 19 / 0.4);
  transition: transform var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}

.shop-card:hover {
  transform: translateY(-2px);
  border-color: rgb(111 59 221 / 0.55);
}

.shop-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.shop-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
  background: var(--surface-tint);
  border-radius: var(--radius-button);
}

.shop-card__icon svg,
.shop-node svg,
.shop-secure svg { fill: none; }

.shop-card__title {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: var(--wt-bold);
  line-height: var(--lh-h3);
  white-space: nowrap;
}

.shop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.shop-tag {
  padding: 0.125rem 0.5rem;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-medium);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--surface-tint);
  border-radius: 999px;
}

.shop-tag--auto {
  color: var(--accent);
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline) rgb(111 59 221 / 0.45);
}

/* ---- Node: the card's pin on the spine ---------------------------------- */
.shop-node {
  position: absolute;
  z-index: 2;
  top: 0.9375rem;
  left: -1.6875rem;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.shop-node--live {
  background: var(--accent);
  border-color: var(--accent);
}

/* ---- Product row: shapes, not a product ---------------------------------- */
.shop-product {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem;
  border: var(--hairline) solid var(--rule);
  border-radius: 0.5rem;
}

.shop-product__img {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  background: var(--surface-tint);
  border-radius: 0.375rem;
}

.shop-product__img::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: 18%;
  width: 56%;
  height: 50%;
  background: var(--accent-light);
  border-radius: 40% 40% 0.1875rem 0.1875rem;
}

.shop-product__info {
  display: grid;
  flex: 1 1 auto;
  gap: 0.3125rem;
  min-width: 0;
}

.shop-product__name,
.shop-product__meta {
  height: 0.3125rem;
  background: var(--ink);
  border-radius: 2px;
}

.shop-product__name { width: 80%; }
.shop-product__meta { width: 40%; background: rgb(19 19 19 / 0.25); }

.shop-swatches {
  display: flex;
  gap: 0.1875rem;
}

.shop-swatches span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--hairline) rgb(19 19 19 / 0.2);
}

.shop-swatches span:nth-child(1) { background: var(--ink); }
.shop-swatches span:nth-child(2) { background: var(--accent); }
.shop-swatches span:nth-child(3) { background: var(--surface-tint); }

/* ---- Payment: secure badge ---------------------------------------------- */
.shop-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  padding: 0.125rem 0.4375rem;
  color: var(--surface);
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  background: var(--ink);
  border-radius: 999px;
}

/* ---- Shipping: order status line ---------------------------------------- */
.shop-status {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  padding-top: 0.875rem;
}

/* The rail under the three dots; the done part is purple. */
.shop-status::before,
.shop-status::after {
  content: "";
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  height: 2px;
  border-radius: 2px;
}

.shop-status::before { right: 0.3125rem; background: var(--rule); }
.shop-status::after  { right: 50%;       background: var(--accent); }

.shop-status__step {
  position: relative;
  color: rgb(19 19 19 / 0.55);
  font-size: 0.6875rem;
  font-weight: var(--wt-medium);
}

.shop-status__step:nth-child(2) { text-align: center; }
.shop-status__step:nth-child(3) { text-align: right; }

.shop-status__step::before {
  content: "";
  position: absolute;
  top: -0.8125rem;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--surface);
  border: 2px solid rgb(19 19 19 / 0.2);
  border-radius: 50%;
}

.shop-status__step:nth-child(1)::before { left: 0; }
.shop-status__step:nth-child(2)::before { left: calc(50% - 0.3125rem); }
.shop-status__step:nth-child(3)::before { right: 0; }

.shop-status__step.is-done { color: var(--ink); }
.shop-status__step.is-done::before { background: var(--accent); border-color: var(--accent); }

/* ---- The live store ----------------------------------------------------- */
.shop-card--live {
  background: var(--ink);
  border-color: var(--ink);
}

.shop-card--live:hover { border-color: var(--accent-light); }

.shop-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-invert);
  font-size: 1rem;
  font-weight: var(--wt-bold);
}

.shop-live__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent-light);
  border-radius: 50%;
}

.shop-card--live .shop-tag {
  color: var(--ink-invert);
  background: rgb(255 255 255 / 0.1);
}

/* ---- Wide enough: zigzag around a central spine -------------------------
   24 columns, one-rem rows; the spine is the line between columns 12 and 13.
   Odd steps sit left and cross the spine by one column; even steps start
   exactly on it. So neighbours overlap by that one column, and the card
   underneath keeps that column empty. The live store sits across the spine
   at the bottom, where it ends. */
@container shop (min-width: 28rem) {
  .shop__stage {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: repeat(27, 1rem);
    gap: 0;
    padding-left: 0;
  }

  .shop__stage::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    background-image: radial-gradient(rgb(19 19 19 / 0.12) 1px, transparent 1.2px);
    background-size: 1.25rem 1.25rem;
    border-radius: var(--radius-panel);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
  }

  .shop__spine {
    top: 1.5rem;
    bottom: auto;
    left: calc(50% - 1px);
    height: calc(21rem - 1.5rem);
  }

  .shop-card { align-self: start; }

  .shop-card--1 { grid-column: 1 / 14;  grid-row: 1;  }
  .shop-card--2 { grid-column: 13 / 25; grid-row: 4;  z-index: 2; }
  .shop-card--3 { grid-column: 1 / 14;  grid-row: 9;  z-index: 3; }
  .shop-card--4 { grid-column: 13 / 25; grid-row: 12; z-index: 4; }
  .shop-card--5 { grid-column: 1 / 14;  grid-row: 17; z-index: 5; }
  .shop-card--live { grid-column: 4 / 22; grid-row: 22; z-index: 6; }

  /* Keep content clear of the column the neighbouring card crosses into. */
  .shop-card--1, .shop-card--3, .shop-card--5 { padding-right: calc(100% / 13 + 1rem); }
  .shop-card--2, .shop-card--4 { padding-left: calc(100% / 12 + 1rem); }

  /* Nodes on the spine: one column (1/13 of a card) in from the edge that
     crosses it. */
  .shop-card--1 .shop-node,
  .shop-card--3 .shop-node,
  .shop-card--5 .shop-node { left: auto; right: calc(100% / 13 - 0.625rem); }

  .shop-card--2 .shop-node,
  .shop-card--4 .shop-node { left: -0.625rem; }

  .shop-card--live .shop-node { top: -0.625rem; left: calc(50% - 0.625rem); }

  .shop-card--live {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }

  .shop-card--live .shop-tags { justify-content: flex-end; }
}

/* Narrow board — the desktop column between roughly 960 and 1075px. Half a
   board is only about 240px here, so tag rows wrap and cards grow taller;
   the rows below each card start further down so a wrapped row is never
   tucked under the next card. Columns are unchanged. */
@container shop (min-width: 28rem) and (max-width: 31.99rem) {
  .shop__stage { grid-template-rows: repeat(29, 1rem); }
  .shop__spine { height: calc(22rem - 1.5rem); }
  .shop-card--3 { grid-row: 10; }
  .shop-card--4 { grid-row: 15; }
  .shop-card--5 { grid-row: 18; }
  .shop-card--live { grid-row: 23; }
}

/* In the stacked timeline the spine is drawn to the bottom of the stage;
   the live card hides the part that would run on past its own node. */
@container shop (max-width: 27.99rem) {
  .shop-card--live::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    bottom: -0.75rem;
    left: -1.25rem;
    width: 0.625rem;
    background: var(--surface-tint);
  }
}

/* ---- Motion ---------------------------------------------------------------
   The spine's dashes travel down, as orders would; the live dot pulses;
   hover lifts a card. Nothing else moves; all of it stops under reduced
   motion. */
@media (prefers-reduced-motion: no-preference) {
  .shop__spine { animation: shop-flow 1.4s linear infinite; }

  .shop-live__dot::after,
  .shop-node--live::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent-light);
    border-radius: 50%;
    animation: ops-pulse 2.4s var(--ease-out) infinite;
  }

  .shop-node--live::after { inset: -2px; background: var(--accent); }
}

@keyframes shop-flow {
  to { background-position: 0 10px; }
}

/* ------------------------------------------------------------
   Graphic design hero: Atölye No:30 identity collage
   Real project images, shown whole. Scoped to .identity.
   ------------------------------------------------------------ */

.service-hero__media--identity { container: identity / inline-size; }

/* Narrow first: the shop front across the top, ribbon and apron side by
   side beneath it, the box across the bottom. */
.identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.identity__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: var(--hairline) solid rgb(19 19 19 / 0.12);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.05), 0 18px 40px -26px rgb(19 19 19 / 0.5);
  transition: transform var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}

.identity__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.05), 0 22px 44px -24px rgb(19 19 19 / 0.55);
}

/* The image fills its frame at its own ratio: nothing is cropped, and the
   radius comes from the frame, so the photograph itself is untouched. */
.service-hero__media--identity .identity__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.identity__item--front,
.identity__item--box { grid-column: 1 / -1; }

/* ---- Wide enough: editorial arrangement -------------------------------
   A stage with a fixed ratio; every frame is placed and sized in
   percentages of it, so the whole arrangement scales as one piece. The shop
   front is the largest and sits in front; ribbon above-left, apron
   below-left, box below-right. Overlaps land on image edges — wall, strap,
   sill — never on a logo. */
@container identity (min-width: 28rem) {
  .identity {
    position: relative;
    display: block;
    aspect-ratio: 625 / 487;
  }

  .identity__item { position: absolute; }

  /* Worked out on a 625 × 487 board: the shop front overlaps the ribbon and
     the apron by about 22px (bow edge, apron strap) and the box overlaps
     the shop front by about 8px (window sill). */
  .identity__item--ribbon { left: 0;      top: 0;      width: 41.6%; z-index: 1; }
  .identity__item--apron  { left: 0;      top: 42.7%;  width: 41.6%; z-index: 1; }
  .identity__item--front  { left: 38.08%; top: 5.75%;  width: 61.92%; z-index: 2; }
  .identity__item--box    { left: 49.92%; top: 57.1%;  width: 50.08%; z-index: 3; }
}

/* ------------------------------------------------------------
   SEO hero: crawl → technical → content → authority → measurement
   Scoped to .seo.
   ------------------------------------------------------------ */

.service-hero__media--seo { container: seo / inline-size; }

.seo {
  margin: 0;
  color: var(--ink-muted);
}

/* Narrow first: the cards in reading order, a short dashed tick between
   each pair standing in for the board's connectors. */
.seo__stage {
  position: relative;
  display: grid;
  gap: 1.125rem;
}

.seo__links { display: none; }

.seo-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface);
  border: var(--hairline) solid rgb(19 19 19 / 0.14);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.05), 0 14px 30px -20px rgb(19 19 19 / 0.4);
  transition: transform var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}

.seo-card:hover {
  transform: translateY(-2px);
  border-color: rgb(111 59 221 / 0.55);
}

.seo-card + .seo-card::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  height: 1.125rem;
  border-left: 1.5px dashed rgb(111 59 221 / 0.5);
}

.seo-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.seo-card__title {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: var(--wt-bold);
  line-height: var(--lh-h3);
}

.seo-card__title--lg { font-size: 1rem; }

.seo-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
  background: var(--surface-tint);
  border-radius: var(--radius-button);
}

.seo-card__icon--solid {
  color: var(--surface);
  background: var(--accent);
}

.seo-card__icon svg { fill: none; }

.seo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.seo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.5rem;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-medium);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--surface-tint);
  border-radius: 999px;
}

.seo-tag--index {
  color: var(--accent);
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline) rgb(111 59 221 / 0.45);
}

.seo-tag__dot,
.seo-watch__dot {
  position: relative;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--accent);
  border-radius: 50%;
}

/* ---- Site health ---- */
.seo-card--health {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding-block: 0.5rem;
}

.seo-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  white-space: nowrap;
}

/* ---- Crawl tree ---- */
.seo-tree {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: 3.5rem;
  overflow: visible;
}

.seo-tree__line {
  fill: none;
  stroke: rgb(19 19 19 / 0.28);
  stroke-width: 1.25;
}

.seo-tree__root { fill: var(--ink); }
.seo-tree__page { fill: var(--surface); stroke: rgb(19 19 19 / 0.35); stroke-width: 1.25; }
.seo-tree__page--on { fill: var(--accent); stroke: var(--accent); }
.seo-tree__leaf { fill: rgb(19 19 19 / 0.12); }
.seo-tree__leaf--on { fill: var(--accent-light); }

/* ---- Technical: vitals as bars without values ---- */
.seo-card--tech { border-top: 3px solid var(--accent); }

.seo-vitals {
  display: grid;
  gap: 0.375rem;
}

.seo-vital {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.seo-vital__name {
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  letter-spacing: 0.04em;
}

.seo-vital__bar {
  height: 0.375rem;
  overflow: hidden;
  background: var(--surface-tint);
  border-radius: 999px;
}

.seo-vital__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.seo-vital:nth-child(1) .seo-vital__bar span { width: 78%; }
.seo-vital:nth-child(2) .seo-vital__bar span { width: 64%; }
.seo-vital:nth-child(3) .seo-vital__bar span { width: 86%; }

/* ---- Content outline ---- */
.seo-outline {
  display: grid;
  gap: 0.3125rem;
  padding: 0.5rem 0.625rem;
  border: var(--hairline) solid var(--rule);
  border-radius: 0.5rem;
}

.seo-outline span { height: 0.25rem; border-radius: 2px; }

.seo-outline__h1 { width: 62%; height: 0.4375rem !important; background: var(--ink); }
.seo-outline__h2 { width: 48%; margin-left: 0.625rem; height: 0.3125rem !important; background: rgb(19 19 19 / 0.55); }
.seo-outline__h2--short { width: 36%; }
.seo-outline__p { width: 80%; margin-left: 0.625rem; background: rgb(19 19 19 / 0.16); }

/* An in-text link: part of the line in the accent colour. */
.seo-outline__p--link {
  background: linear-gradient(90deg, rgb(19 19 19 / 0.16) 0 40%, var(--accent) 40% 62%, rgb(19 19 19 / 0.16) 62%);
}

/* ---- Authority ---- */
.seo-refs {
  display: block;
  width: 100%;
  max-width: 10rem;
  height: 2.5rem;
  overflow: visible;
}

.seo-refs__line {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.55;
  stroke-width: 1.25;
}

.seo-refs__site { fill: var(--surface); stroke: rgb(19 19 19 / 0.4); stroke-width: 1.25; }
.seo-refs__home { fill: var(--ink); }

/* ---- Measurement ---- */
.seo-chart {
  display: block;
  width: 100%;
  height: 2.5rem;
  overflow: visible;
}

.seo-chart__grid {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.seo-chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---- Wide enough: the board ---------------------------------------------
   24 columns, one-rem rows. Crawl top-left with site health beside it,
   technical wide across the middle, content lower right, authority lower
   left, measurement at the foot. Cards overlap only by padding; the
   connectors run through the gaps between them. */
@container seo (min-width: 28rem) {
  .seo__stage {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: repeat(38, 1rem);
    gap: 0;
  }

  .seo__stage::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    background-image: radial-gradient(rgb(19 19 19 / 0.12) 1px, transparent 1.2px);
    background-size: 1.25rem 1.25rem;
    border-radius: var(--radius-panel);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
  }

  .seo-card + .seo-card::before { display: none; }

  .seo-card { align-self: start; }

  .seo-card--health    { grid-column: 17 / 25; grid-row: 1;  margin-top: 0.5rem; z-index: 2; }
  .seo-card--crawl     { grid-column: 1 / 13;  grid-row: 1;  }
  .seo-card--tech      { grid-column: 5 / 21;  grid-row: 9;  z-index: 3; }
  .seo-card--content   { grid-column: 13 / 25; grid-row: 20; z-index: 2; }
  .seo-card--authority { grid-column: 1 / 11;  grid-row: 21; z-index: 2; }
  .seo-card--measure   { grid-column: 3 / 19;  grid-row: 31; z-index: 4; }

  .seo__links {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .seo__links--narrow { display: none; }

  .seo__link {
    fill: none;
    stroke: var(--accent);
    stroke-opacity: 0.55;
    stroke-width: 1.25;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
  }
}

/* Narrow board — the desktop column between roughly 960 and 1100px. Tag
   rows wrap at this width and every card grows, so the cards after the
   first start lower and the narrow connector set replaces the wide one. */
@container seo (min-width: 28rem) and (max-width: 35.99rem) {
  .seo__stage { grid-template-rows: repeat(45, 1rem); }

  .seo-card--health    { grid-column: 14 / 25; }
  .seo-card--tech      { grid-row: 12; }
  .seo-card--content   { grid-row: 23; }
  .seo-card--authority { grid-row: 24; }
  .seo-card--measure   { grid-row: 35; }

  .seo__links:not(.seo__links--narrow) { display: none; }
  .seo__links--narrow { display: block; }
}

/* ---- Motion ---------------------------------------------------------------
   The crawl moves (tree lines and the first connector), the Index tag and
   the site-health dot pulse, hover lifts a card. Nothing else; all of it
   stops under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .seo-tree__line {
    stroke-dasharray: 3 3;
    animation: seo-crawl 1.6s linear infinite;
  }

  .seo__link--crawl { animation: seo-crawl 1.6s linear infinite; }

  .seo-tag__dot::after,
  .seo-watch__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    border-radius: 50%;
    animation: ops-pulse 2.4s var(--ease-out) infinite;
  }

  .seo-watch__dot::after { animation-delay: 1.2s; }
}

@keyframes seo-crawl {
  to { stroke-dashoffset: -12; }
}

/* ------------------------------------------------------------
   Lead generation hero: campaign → landing page → form / WhatsApp /
   phone → qualified lead → CRM. Scoped to .lead.
   ------------------------------------------------------------ */

.service-hero__media--lead { container: lead / inline-size; }

.lead {
  margin: 0;
  color: var(--ink-muted);
}

/* Narrow first: the flow top to bottom, the three channels sharing one row,
   a short dashed tick between each step. */
.lead__stage {
  position: relative;
  display: grid;
  gap: 1.125rem;
}

.lead__links { display: none; }

.lead-card,
.lead-channel {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: var(--hairline) solid rgb(19 19 19 / 0.14);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.05), 0 14px 30px -20px rgb(19 19 19 / 0.4);
  transition: transform var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}

.lead-card:hover,
.lead-channel:hover {
  transform: translateY(-2px);
  border-color: rgb(111 59 221 / 0.55);
}

.lead-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
}

.lead__stage > * + *::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  height: 1.125rem;
  border-left: 1.5px dashed rgb(111 59 221 / 0.5);
}

.lead__links + .lead-card::before { display: none; }

.lead-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.lead-card__title {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: var(--wt-bold);
  line-height: var(--lh-h3);
  white-space: nowrap;
}

.lead-card__title--lg { font-size: 1rem; }

.lead-card__icon,
.lead-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
  background: var(--surface-tint);
  border-radius: var(--radius-button);
}

.lead-card__icon--solid { color: var(--surface); background: var(--accent); }
.lead-card__icon--dark  { color: var(--ink-invert); background: rgb(255 255 255 / 0.1); }

.lead-card__icon svg[viewBox],
.lead-channel__icon svg[viewBox],
.lead-handoff svg { fill: none; }

.lead-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.lead-tag {
  padding: 0.125rem 0.5rem;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-medium);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--surface-tint);
  border-radius: 999px;
}

.lead-tag--outline {
  margin-left: auto;
  color: var(--accent);
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline) rgb(111 59 221 / 0.45);
}

/* ---- Landing page: a working page in miniature ---- */
.lead-card--landing { border-top: 3px solid var(--accent); }

.lead-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0.5rem 0.625rem;
  padding: 0.625rem;
  background: var(--surface-tint);
  border-radius: 0.5rem;
}

.lead-page__offer,
.lead-page__form {
  display: grid;
  align-content: start;
  gap: 0.3125rem;
}

.lead-page__label {
  color: rgb(19 19 19 / 0.55);
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lead-page__h {
  height: 0.4375rem;
  background: var(--ink);
  border-radius: 2px;
}

.lead-page__h--short { width: 70%; background: rgb(19 19 19 / 0.35); height: 0.3125rem; }

.lead-page__form {
  padding: 0.5rem;
  background: var(--surface);
  border-radius: 0.375rem;
}

.lead-page__input {
  height: 0.75rem;
  border: var(--hairline) solid rgb(19 19 19 / 0.2);
  border-radius: 0.25rem;
}

.lead-page__cta {
  justify-self: start;
  padding: 0.1875rem 0.625rem;
  color: var(--surface);
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  background: var(--accent);
  border-radius: 0.3125rem;
}

.lead-page__quick {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.lead-page__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5rem;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-medium);
  background: var(--surface);
  border: var(--hairline) solid rgb(19 19 19 / 0.16);
  border-radius: 999px;
}

.lead-page__btn svg { color: var(--accent); }

/* ---- Channels ---- */
.lead-channels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.lead-channel {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: var(--wt-bold);
  text-align: center;
}

/* ---- Qualified lead ---- */
.lead-record {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border: var(--hairline) solid var(--rule);
  border-radius: 0.5rem;
}

.lead-record__avatar {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--surface-tint);
  border: 2px solid var(--accent-light);
  border-radius: 50%;
}

.lead-record__lines {
  display: grid;
  flex: 1 1 auto;
  gap: 0.25rem;
}

.lead-record__lines span {
  height: 0.3125rem;
  border-radius: 2px;
}

.lead-record__lines span:first-child { width: 55%; background: var(--ink); }
.lead-record__lines span:last-child  { width: 35%; background: rgb(19 19 19 / 0.25); }

.lead-states {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.lead-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  line-height: 1.5;
  white-space: nowrap;
  border-radius: 999px;
}

.lead-state--new  { color: var(--accent); box-shadow: inset 0 0 0 var(--hairline) rgb(111 59 221 / 0.45); }
.lead-state--ok   { color: var(--surface); background: var(--accent); }
.lead-state--call { color: var(--surface); background: var(--ink); }

.lead-state__dot {
  position: relative;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--accent);
  border-radius: 50%;
}

/* ---- CRM: the end of the flow, dark ---- */
.lead-card--crm {
  background: var(--ink);
  border-color: var(--ink);
}

.lead-card--crm:hover { border-color: var(--accent-light); }
.lead-card--crm .lead-card__title { color: var(--ink-invert); }
.lead-card--crm .lead-tag { color: var(--ink-invert); background: rgb(255 255 255 / 0.1); }

.lead-handoff {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: var(--wt-bold);
}

/* ---- Wide enough: the branching board -----------------------------------
   24 columns, one-rem rows. Campaign top left feeds the landing page in the
   middle; three channels branch out below it and join again at the
   qualified lead, which hands over to CRM on the right. Cards overlap only by
   padding; connectors run through the gaps. */
@container lead (min-width: 28rem) {
  .lead__stage {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: repeat(36, 1rem);
    gap: 0;
  }

  .lead__stage::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    background-image: radial-gradient(rgb(19 19 19 / 0.12) 1px, transparent 1.2px);
    background-size: 1.25rem 1.25rem;
    border-radius: var(--radius-panel);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
  }

  .lead__stage > * + *::before { display: none; }

  /* The wrapper steps aside so each channel is a grid item of the board. */
  .lead-channels { display: contents; }

  .lead-card,
  .lead-channel { align-self: start; }

  .lead-card--campaign   { grid-column: 1 / 10;  grid-row: 1;  }
  .lead-card--landing    { grid-column: 9 / 21;  grid-row: 7;  z-index: 2; }
  .lead-channel--form     { grid-column: 1 / 8;   grid-row: 22; }
  .lead-channel--whatsapp { grid-column: 9 / 16;  grid-row: 22; }
  .lead-channel--phone    { grid-column: 17 / 24; grid-row: 22; }
  .lead-card--lead       { grid-column: 1 / 14;  grid-row: 27; z-index: 2; }
  .lead-card--crm        { grid-column: 16 / 25; grid-row: 28; z-index: 2; }

  .lead-channel {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.5rem;
  }

  .lead__links {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .lead__link {
    fill: none;
    stroke: var(--accent);
    stroke-opacity: 0.55;
    stroke-width: 1.25;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
  }
}

/* ---- Motion ---------------------------------------------------------------
   Traffic moves: campaign into the page, and the three channels into the
   lead. The new-record dot pulses; hover lifts a card. Nothing else, and all
   of it stops under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .lead__link--flow { animation: lead-flow 1.8s linear infinite; }

  .lead-state__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    border-radius: 50%;
    animation: ops-pulse 2.4s var(--ease-out) infinite;
  }
}

@keyframes lead-flow {
  to { stroke-dashoffset: -14; }
}

/* ------------------------------------------------------------
   GEO hero: brand content, structured data and source trust feed an AI
   answer that cites the brand. Scoped to .geo.
   ------------------------------------------------------------ */

.service-hero__media--geo { container: geo / inline-size; }

.geo {
  margin: 0;
  color: var(--ink-muted);
}

/* Narrow first: inputs, then the answer, then where the brand appears. */
.geo__stage {
  position: relative;
  display: grid;
  gap: 1.125rem;
}

.geo__links { display: none; }

.geo-card,
.geo-cite {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: var(--hairline) solid rgb(19 19 19 / 0.14);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.05), 0 14px 30px -20px rgb(19 19 19 / 0.4);
  transition: transform var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}

.geo-card:hover,
.geo-cite:hover {
  transform: translateY(-2px);
  border-color: rgb(111 59 221 / 0.55);
}

.geo__stage > * + *::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  height: 1.125rem;
  border-left: 1.5px dashed rgb(111 59 221 / 0.5);
}

.geo__links + .geo-card::before { display: none; }

.geo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
}

.geo-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.geo-card__title {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: var(--wt-bold);
  line-height: var(--lh-h3);
  white-space: nowrap;
}

.geo-card__title--lg { font-size: 1rem; }

.geo-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
  background: var(--surface-tint);
  border-radius: var(--radius-button);
}

.geo-card__icon--solid { color: var(--surface); background: var(--accent); }

.geo-card__icon svg[fill="none"],
.geo-cite svg { fill: none; }

.geo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.geo-tag {
  padding: 0.125rem 0.5rem;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: var(--wt-medium);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--surface-tint);
  border-radius: 999px;
}

/* Schema types in a code face: a hint of structure, not code. */
.geo-tags--code .geo-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline) rgb(19 19 19 / 0.16);
}

.geo-tag--outline {
  margin-left: auto;
  color: var(--accent);
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--hairline) rgb(111 59 221 / 0.45);
}

/* ---- The AI answer ------------------------------------------------------- */
.geo-card--answer {
  gap: 0.625rem;
  border-color: rgb(19 19 19 / 0.22);
  box-shadow: 0 1px 2px rgb(19 19 19 / 0.06), 0 22px 44px -24px rgb(19 19 19 / 0.5);
}

.geo-chat {
  display: grid;
  gap: 0.625rem;
}

/* The question: a plain bubble on the right. */
.geo-chat__ask {
  justify-self: end;
  max-width: 85%;
  padding: 0.4375rem 0.75rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: var(--wt-medium);
  line-height: 1.35;
  background: var(--surface-tint);
  border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
}

/* The reply: the brand named, the rest as lines — nothing put in an
   assistant's mouth beyond the name. */
.geo-chat__reply {
  display: grid;
  gap: 0.375rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--accent);
}

.geo-chat__line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.geo-chat__brand {
  flex: 0 0 auto;
  padding: 0 0.25rem;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: var(--wt-bold);
  background: rgb(111 59 221 / 0.12);
  border-radius: 0.25rem;
}

.geo-chat__bar {
  height: 0.3125rem;
  background: rgb(19 19 19 / 0.16);
  border-radius: 2px;
}

.geo-chat__bar--inline { flex: 1 1 auto; }
.geo-chat__bar--short { width: 62%; }

.geo-sources {
  display: grid;
  gap: 0.3125rem;
  padding-top: 0.5rem;
  border-top: var(--hairline) solid var(--rule);
}

.geo-sources__label {
  color: rgb(19 19 19 / 0.55);
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.geo-source {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.5rem;
  border: var(--hairline) solid var(--rule);
  border-radius: 0.5rem;
}

.geo-source__mark {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  background: rgb(19 19 19 / 0.14);
  border-radius: 0.25rem;
}

.geo-source__bar {
  width: 45%;
  height: 0.3125rem;
  background: rgb(19 19 19 / 0.16);
  border-radius: 2px;
}

/* The brand's own site among the sources. */
.geo-source--own { border-color: rgb(111 59 221 / 0.45); }
.geo-source--own .geo-source__mark { background: var(--accent); }

.geo-source__name {
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: var(--wt-bold);
}

/* ---- Citations ------------------------------------------------------------ */
.geo-cite {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.75rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: var(--wt-bold);
  white-space: nowrap;
}

.geo-cite svg { flex: 0 0 auto; color: var(--accent); }

.geo-cite--source {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}

.geo-cite--source svg { color: var(--accent-light); }
.geo-cite--source:hover { border-color: var(--accent-light); }

.geo-cite__dot {
  position: relative;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: auto;
  background: var(--accent-light);
  border-radius: 50%;
}

.geo-cites {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* ---- Wide enough: the answer network ------------------------------------
   24 columns, one-rem rows. Inputs down the left, each joining the answer's
   left edge; the answer large on the right; where the brand appears sits
   under it. Cards overlap only by padding; connectors run through gaps. */
@container geo (min-width: 28rem) {
  .geo__stage {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: repeat(27, 1rem);
    gap: 0;
  }

  .geo__stage::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    background-image: radial-gradient(rgb(19 19 19 / 0.12) 1px, transparent 1.2px);
    background-size: 1.25rem 1.25rem;
    border-radius: var(--radius-panel);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 85%);
  }

  .geo__stage > * + *::before { display: none; }

  .geo-cites { display: contents; }

  .geo-card,
  .geo-cite { align-self: start; }

  .geo-card--brand   { grid-column: 1 / 9;   grid-row: 1;  }
  .geo-card--schema  { grid-column: 1 / 9;   grid-row: 9;  }
  .geo-card--trust   { grid-column: 2 / 10;  grid-row: 19; }
  .geo-card--answer  { grid-column: 10 / 25; grid-row: 4;  z-index: 2; }
  .geo-cite--source  { grid-column: 13 / 25; grid-row: 20; z-index: 2; }
  .geo-cite--mention { grid-column: 12 / 19; grid-row: 24; }
  .geo-cite--web     { grid-column: 19 / 25; grid-row: 24; margin-left: 0.5rem; }

  .geo__links {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .geo__links--narrow { display: none; }

  .geo__link {
    fill: none;
    stroke: var(--accent);
    stroke-opacity: 0.55;
    stroke-width: 1.25;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
  }
}

/* Narrow board — the desktop column between roughly 960 and 1100px. The
   input cards are too narrow for their titles on one line, so titles wrap,
   every card grows, the rows below move down, the three citations stack
   under the answer, and the narrow connector set replaces the wide one. */
@container geo (min-width: 28rem) and (max-width: 35.99rem) {
  .geo__stage { grid-template-rows: repeat(32, 1rem); }

  .geo-card--brand .geo-card__title,
  .geo-card--schema .geo-card__title,
  .geo-card--trust .geo-card__title { white-space: normal; }

  .geo-card--schema  { grid-row: 12; }
  .geo-card--trust   { grid-row: 23; }
  .geo-cite--source  { grid-column: 12 / 25; grid-row: 22; }
  .geo-cite--mention { grid-column: 12 / 25; grid-row: 25; }
  .geo-cite--web     { grid-column: 12 / 25; grid-row: 28; margin-left: 0; }

  .geo__links:not(.geo__links--narrow) { display: none; }
  .geo__links--narrow { display: block; }
}

/* ---- Motion ---------------------------------------------------------------
   The three inputs flow into the answer; the citation dot pulses; hover
   lifts a card. Nothing else, and all of it stops under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .geo__link--flow { animation: geo-flow 1.8s linear infinite; }

  .geo-cite__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent-light);
    border-radius: 50%;
    animation: ops-pulse 2.4s var(--ease-out) infinite;
  }
}

@keyframes geo-flow {
  to { stroke-dashoffset: -14; }
}

.avatar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.avatar-row__stack { display: flex; }

.avatar-row__img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 3px solid var(--surface-tint);
}

.avatar-row__img + .avatar-row__img { margin-left: -0.75rem; }

.avatar-row__note {
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: var(--wt-medium);
}

/* ============================================================
   CLIENT STRIP — divided variant
   ============================================================ */

.clients--divided {
  padding-block: var(--sp-2) var(--sp-6);
  border-block: 0;
}

.clients--divided .clients__list { gap: 0; }

.clients--divided .client { padding-inline: clamp(var(--sp-3), 3vw, var(--sp-6)); }

.clients--divided .client:not(:first-child) {
  border-left: var(--hairline) solid rgb(19 19 19 / 0.16);
}

/* ============================================================
   SECTION NAV (sticky)
   ============================================================ */

.section-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--ink);
}

.section-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.section-nav__inner::-webkit-scrollbar { display: none; }

.section-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--section-nav-h);
  padding-inline: var(--sp-2);
  color: var(--ink-invert-muted);
  font-size: var(--fs-body);
  font-weight: var(--wt-medium);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}

.section-nav__link:hover { color: var(--ink-invert); }

/* Set by the scroll spy; colour change plus underline, never colour alone. */
.section-nav__link.is-active {
  color: var(--ink-invert);
  border-bottom-color: var(--accent-light);
}

.section-nav__link--accent {
  margin-left: auto;
  color: var(--accent-light);
  font-weight: var(--wt-bold);
}

.section-nav__link--accent:hover { color: var(--ink-invert); }

/* ============================================================
   BAND B — BENEFITS
   ============================================================ */

.band__aside > .btn { margin-top: var(--sp-5); }

.card-grid-2 {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
}

/* ============================================================
   BAND C — INDUSTRIES
   ============================================================ */

.industry-list {
  display: grid;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
}

.industry {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
}

.industry__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-button);
}

.industry__label {
  color: var(--ink);
  font-weight: var(--wt-bold);
}

/* ============================================================
   BAND D — WORK CARDS (light cards inside the dark band)
   ============================================================ */

.work-grid {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
}

.work-card {
  padding: 0;
  overflow: hidden;
}

.work-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.work-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }

/* Image-free work card: a small sprite icon leads the title. A tint tile in
   the accent, the same footprint as .industry__tile; nothing decorative. */
.work-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--sp-2);
  background: var(--surface-tint);
  color: var(--accent);
  border-radius: var(--radius-button);
}

/* ============================================================
   BAND E — WHY US
   ============================================================ */

.pillars { margin-top: var(--sp-8); }

.pillars__grid {
  display: grid;
  gap: var(--sp-5);
}

.duo {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: var(--wt-bold);
  white-space: nowrap;
}

/* ============================================================
   BAND F — FAQ (native details/summary)
   ============================================================ */

.faq-grid {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  align-items: start;
}

.faq { padding: 0; }

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink);
  font-size: var(--fs-body-lg);
  font-weight: var(--wt-bold);
  line-height: var(--lh-h3);
  list-style: none;
  cursor: pointer;
}

.faq__summary::marker { content: none; }
.faq__summary::-webkit-details-marker { display: none; }

.faq__chevron { flex: 0 0 auto; }

@media (prefers-reduced-motion: no-preference) {
  .faq__chevron { transition: transform var(--dur-state) var(--ease-out); }
}

.faq[open] .faq__chevron { transform: rotate(180deg); }

.faq__answer { padding: 0 var(--sp-4) var(--sp-4); }

/* ============================================================
   BAND G — CONTACT
   ============================================================ */

.contact-blocks {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

.contact-block {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.contact-block__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--surface);
  border-radius: var(--radius-button);
}

.contact-block__title {
  color: var(--ink-invert);
  font-size: var(--fs-h3);
  font-weight: var(--wt-bold);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
}

.contact-block__note {
  margin-top: 0.375rem;
  color: var(--ink-invert-muted);
  max-width: 44ch;
}

/* Inline link in flowing text: the hit area is grown to 44px with
   cancelling padding/margin so the line itself never moves. */
.contact-block__note a {
  display: inline-block;
  color: var(--ink-invert);
  padding-block: 0.8125rem;
  margin-block: -0.8125rem;
}

.form-card {
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

.form-card .form__title { color: var(--ink); }
.form-card :focus-visible { outline-color: var(--focus-ring); }

/* The homepage form sits on the dark panel; this one sits on a white card. */
.form--light .field__label { color: var(--ink-muted); }

.form--light .field__input {
  color: var(--ink);
  border-bottom-color: rgb(19 19 19 / 0.35);
}

.form--light .field__input:hover { border-bottom-color: var(--ink-muted); }
.form--light .field__input:focus { border-bottom-color: var(--ink); }

.form--light .field__input--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23131313' stroke-width='1.5'%3E%3Cpath d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
}

.form--light .field__error { color: var(--danger); }
.form--light .field__input[aria-invalid="true"],
.form--light .field__input[aria-invalid="true"]:hover { border-bottom-color: var(--danger); }
.form--light .form__status { border-left-color: var(--accent); }
.form--light .form__status.is-error { border-left-color: var(--danger); }
.form--light .form__status.is-ok { border-left-color: var(--accent); }
.form--light .form__legal { color: var(--ink-muted); }

/* ---- Service interest: real radios styled as tiles ---- */
.tile-options {
  border: 0;
  margin: 0;
  padding: 0;
}

.tile-options__legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: var(--fs-caption);
  font-weight: var(--wt-medium);
  color: var(--ink-muted);
}

.tile-options__grid {
  display: grid;
  gap: var(--sp-2);
}

.tile-option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0.625rem var(--sp-2);
  color: var(--ink);
  font-weight: var(--wt-medium);
  border: var(--hairline) solid var(--ink);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}

/* The real input covers the tile, so the whole tile is the hit area and
   the input itself keeps focus, checkedness and form semantics. */
.tile-option__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tile-option:has(:checked) {
  background: var(--surface-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
  border-color: var(--accent);
}

.tile-option:has(:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ============================================================
   MEDIA QUERIES
   ============================================================ */

@media (max-width: 59.99rem) {

  /* section-nav.js centres the active tab, so tabs snap to their centre as
     well: the centred position is then itself a snap point and nothing pulls
     it back to a tab's left edge. proximity, not mandatory, so a hand swipe
     can still come to rest at either end of the bar. */
  .section-nav__inner {
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  }

  .section-nav__link { scroll-snap-align: center; }

  .section-nav__link--accent { margin-left: var(--sp-2); }
}

@media (min-width: 40rem) {

  .card-grid-2 { grid-template-columns: repeat(2, 1fr); }

  .industry-list { grid-template-columns: repeat(2, 1fr); }

  .work-grid { grid-template-columns: repeat(2, 1fr); }

  .tile-options__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60rem) {

  .service-hero__grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    gap: var(--sp-10);
  }

  .split {
    grid-template-columns: var(--split-cols, 1fr 1fr);
    gap: var(--sp-10);
  }

  .band__aside--sticky {
    position: sticky;
    top: calc(var(--section-nav-h) + var(--sp-4));
  }

  .pillars__grid { grid-template-columns: repeat(3, 1fr); }

  .duo { grid-template-columns: 1.5fr 1fr; }

  .faq-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   INNER LIST PAGES — shared by referanslarimiz/ and islerimiz/
   ============================================================ */

.band--intro { padding-block: var(--sp-6) var(--sp-8); }

/* The page's extractable summary. */
.intro__lede {
  margin-top: var(--sp-3);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-h3);
  max-width: 62ch;
}

/* Inline link in flowing prose: the hit area is grown to 44px with
   cancelling padding and margin so the line itself never moves. */
.intro__lede a {
  display: inline-block;
  padding-block: 0.8125rem;
  margin-block: -0.8125rem;
  color: var(--accent);
  text-underline-offset: 0.25em;
}

.intro__lede a:hover { color: var(--ink); }

.cta-band__action { margin-top: var(--sp-5); }

/* 404 only. */
.form-errors {
  margin-top: var(--sp-4);
  padding-left: var(--sp-4);
  color: var(--ink-muted);
  list-style: disc;
}

.form-errors li + li {
  margin-top: var(--sp-1);
}

.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  list-style: none;
  padding: 0;
}

/* ============================================================
   MAP — /iletisim/
   The embedded frame carries no marker of its own, so the pin here is
   the logo's mark. The frame is inert: a drag would slide the map out
   from under a pin that cannot follow it, so the cover link takes every
   click to directions instead.
   ============================================================ */

.map {
  position: relative;
  margin-top: var(--sp-5);
  aspect-ratio: 16 / 9;
  border: var(--hairline) solid var(--ink);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface-tint);
}

/* Taller than it is wide on a phone, where a 16:9 slot leaves the streets
   around the pin too small to read. */
@media (max-width: 40rem) {
  .map { aspect-ratio: 4 / 5; }
}

.map__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--sp-3);
  /* No background: the map shows through, and only the button reads as
     something to press. */
  text-decoration: none;
}

.map__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem var(--sp-3);
  background: var(--ink);
  color: var(--ink-invert);
  border-radius: var(--radius-button);
  font-size: var(--fs-caption);
  font-weight: var(--wt-bold);
  box-shadow: var(--shadow-card);
  transition: background var(--dur-hover) var(--ease-out);
}

.map__cover:hover .map__cta,
.map__cover:focus-visible .map__cta { background: var(--accent); }

/* The pin itself: a rounded plate with a point, anchored so the tip sits on
   the coordinates rather than the plate's middle. */
.map__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -100%);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 50% 50% 50% 4px;
  rotate: -45deg;
  box-shadow: 0 6px 14px rgb(19 19 19 / 0.35);
  pointer-events: none;
}

/* The mark stays upright inside the rotated plate. */
.map__mark { rotate: 45deg; }

/* ============================================================
   SITEMAP — /site-haritasi/
   ============================================================ */

.sitemap {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

@media (min-width: 40rem) {
  .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sitemap__title {
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-1);
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: var(--wt-bold);
  line-height: var(--lh-h3);
  border-bottom: var(--hairline) solid var(--rule);
}

.sitemap__list {
  display: grid;
  list-style: none;
  padding: 0;
}

.sitemap__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  text-underline-offset: 0.25em;
  transition: color var(--dur-hover) var(--ease-out);
}

.sitemap__list a:hover { color: var(--accent); }

/* ============================================================
   TESTIMONIAL — shared by referanslarimiz/ and case studies
   ============================================================ */

.testimonial {
  max-width: 46rem;
  margin: var(--sp-6) auto 0;
  padding: var(--card-pad);
  background: var(--surface);
  border: var(--hairline) solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.testimonial__quote {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-h3);
}

.testimonial__by {
  display: grid;
  gap: 0.125rem;
  margin-top: var(--sp-4);
}

.testimonial__name {
  color: var(--ink);
  font-weight: var(--wt-bold);
}

.testimonial__role { font-size: var(--fs-body); }

/* ============================================================
   CTA BAND
   ============================================================ */

/* ============================================================
   COMPARISON TABLE
   A real <table>, not styled divs: the markup is what gets extracted
   by search and answer engines, and a div grid extracts as nothing.
   The wrapper scrolls on its own so a wide table never makes the page
   scroll sideways, and is focusable so the scroll is reachable by
   keyboard. Row headers are <th scope="row">.
   ============================================================ */

.compare {
  margin-top: var(--sp-4);
  overflow-x: auto;
  border: var(--hairline) solid var(--ink);
  border-radius: var(--radius-card);
}

.compare__table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: var(--fs-caption);
  text-align: left;
}

.compare__table caption {
  padding: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  text-align: left;
}

.compare__table th,
.compare__table td {
  padding: 0.75rem var(--sp-2);
  border-top: var(--hairline) solid var(--rule);
  vertical-align: top;
}

.compare__table thead th {
  background: var(--surface-tint);
  color: var(--ink);
  font-weight: var(--wt-bold);
  border-top: 0;
}

.compare__table tbody th {
  color: var(--ink);
  font-weight: var(--wt-bold);
  white-space: nowrap;
}

.compare__table td { color: var(--ink-muted); }

.compare__note {
  margin-top: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-caption);
}

/* Hakkımızda: the photo sits between the lede and the body copy inside one
   band, with even space above and below instead of two stacked band paddings. */
.about__photo { margin-block: var(--sp-6); }