@layer components {

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-m);
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s var(--ease), border-color .15s var(--ease),
                color .15s var(--ease), transform .15s var(--ease);
  }
  .btn:active { transform: translateY(1px); }

  .btn--primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
  }
  .btn--primary:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--on-brand);
  }

  .btn--deep {
    background-color: var(--surface-deep);
    border-color: var(--surface-deep);
    color: var(--on-deep);
  }
  .btn--deep:hover {
    background-color: var(--data);
    border-color: var(--data);
    color: #fff;
  }

  .btn--outline {
    border-color: var(--rule-strong);
    color: var(--ink);
    background-color: transparent;
  }
  .btn--outline:hover { border-color: currentColor; color: var(--brand-deep); }

  .btn--quiet {
    padding-inline: 0;
    color: var(--data);
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .btn--quiet:hover { color: var(--brand-deep); }
  .btn--quiet .icon { transition: transform .15s var(--ease); }
  .btn--quiet:hover .icon { transform: translateX(3px); }

  .btn--lg { font-size: var(--step-0); padding: var(--space-s) var(--space-l); }

  .btn--sm {
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--step--2);
  }

  .btn--pill {
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;

    text-indent: 0.08em;
    line-height: 1;
  }

  .btn--primary.btn--pill { color: #fff; }
  .btn--primary.btn--pill:hover { color: #fff; }

  .eyebrow {
    display: block;
    font-family: var(--font-label);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .eyebrow--brand { color: var(--brand-deep); }

  .lead {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink);
    text-wrap: pretty;
  }
  .guide-meta {
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .section-heading { --flow-space: var(--space-s); }
  /* 68ch keeps a lead at a comfortable line length; the earlier 46ch cap
     squeezed two-sentence leads into five short lines beside empty space. */
  .section-heading p { color: var(--ink-2); font-size: var(--step-1); max-inline-size: 68ch; }
  /* The .measure on a section heading is for its lead paragraph (capped
     above at 68ch), not the title: at --step-4 a 40rem cap split ordinary
     titles such as "Veri merkezi hakkında sık sorulanlar" over two lines
     even with half the row empty. Titles take the row; they still wrap
     (balanced) when the row genuinely runs out. */
  .section-heading.measure { max-inline-size: none; }

  .icon { display: block; flex: none; }

  .certs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--rule);
    list-style: none;
    padding-inline-start: 0;
  }
  .certs__item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }
  .certs__item .icon {
    flex: none;
    color: var(--ink-2);
  }
  .certs__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .certs__code {
    font-family: var(--font-label);
    font-size: var(--step--1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-label);
    color: var(--ink);
  }
  .certs__name {
    font-size: var(--step--1);
    color: var(--ink-3);
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background-color: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--rule);
  }
  .site-header[data-scrolled="true"] { box-shadow: var(--shadow-s); }

  .site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    min-block-size: var(--header-h);
    /* No transition here: height changes reflow the document on every
       scroll-state flip (layout animation), so the jump is intentional. */
  }

  .site-logo { display: flex; align-items: center; }
  .site-logo img {
    block-size: var(--logo-h, 4.5rem);
    inline-size: auto;
  }

  .site-header[data-scrolled="true"] { --logo-h: 2.4rem; }
  .site-header[data-scrolled="true"] .site-header__inner { min-block-size: 4rem; }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-xs);
    color: var(--ink);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-s);
  }
  .site-nav__link:hover { color: var(--brand-deep); }

  .site-nav__link[aria-current="page"],
  .site-nav__link[aria-current="true"] { color: var(--ink); font-weight: 600; }
  .site-nav__link[aria-current="page"]::after,
  .site-nav__link[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-xs);
    inset-block-end: -2px;
    block-size: 2px;
    background-color: var(--brand);
  }

  .site-nav__item { position: relative; }

  .site-nav__menu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2xs));
    inset-inline-start: 0;
    z-index: var(--z-nav);
    min-inline-size: 15rem;
    padding: var(--space-2xs);
    margin: 0;
    list-style: none;
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
  }
  .site-nav__menu[hidden] { display: none; }
  .site-nav__menu .site-nav__link { inline-size: 100%; }
  .site-nav__menu .site-nav__link::after { content: none; }

  @media (max-width: 63.99em) {
    .site-header__inner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      column-gap: var(--space-m);
      row-gap: 0;
      padding-block-end: 0;
    }

    .site-logo { grid-column: 1; grid-row: 1 / 3; }
    .site-logo img { block-size: 3.75rem; }
    .site-header__inner > .cluster { grid-column: 2; grid-row: 1; justify-content: flex-end; }

    .site-nav {
      grid-column: 2;
      grid-row: 2;

      margin-inline-end: calc(var(--space-m) * -1);
      border-block-start: 1px solid var(--rule);
    }

    .site-nav__list {
      justify-content: space-between;
      gap: 0;
      padding-inline-end: var(--space-m);
    }
    .site-nav__list > li:first-child > .site-nav__link { padding-inline-start: 0; }

    .site-nav__link {
      min-block-size: 2.75rem;
      padding-inline: var(--space-3xs);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0;
    }
    .site-nav__link[aria-current="page"]::after { inset-inline: 0 var(--space-2xs); }

    .site-nav__item { position: static; }

    .site-nav__menu {
      inset-inline: 0;
      inset-block-start: 100%;
      min-inline-size: 0;
      padding: var(--space-2xs) var(--space-m) var(--space-s);
      border: 0;
      border-block-end: 1px solid var(--rule);
      border-radius: 0;
    }
    .site-nav__menu .site-nav__link {
      justify-content: flex-start;
      padding-inline: 0;
      font-size: var(--step--1);
      font-weight: 500;
    }
    .site-nav__menu .site-nav__link[aria-current="page"]::after { content: none; }
  }

  .lang-switch {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: 0.04em;
  }
  .lang-switch li + li { border-inline-start: 1px solid var(--rule); }
  .lang-switch a {
    display: block;
    padding: var(--space-3xs) var(--space-2xs);
    color: var(--ink-3);
    text-decoration: none;
  }
  .lang-switch a:hover { color: var(--ink); }
  .lang-switch a[aria-current="true"] { color: var(--brand-deep); font-weight: 700; }

  .theme-toggle {
    display: inline-flex;
    padding: var(--space-2xs);
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--ink-3);
  }
  .theme-toggle:hover { color: var(--ink); }


  .theme-toggle__sun { display: none; }
  .theme-toggle__moon { display: block; }
  :root[data-theme="dark"] .theme-toggle__sun { display: block; }
  :root[data-theme="dark"] .theme-toggle__moon { display: none; }
}

@layer components {

  .hero {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: var(--space-2xl);
    min-block-size: min(84svh, 44rem);
    padding-block: var(--space-2xl) var(--space-l);
    overflow: hidden;
    isolation: isolate;

    color: var(--on-deep);
    --ink: var(--on-deep);
    --ink-2: var(--on-deep-2);
    --ink-3: var(--on-deep-2);
    --rule: rgb(255 255 255 / 0.16);
    --rule-strong: rgb(255 255 255 / 0.42);
    --surface: rgb(255 255 255 / 0.07);
    --surface-2: rgb(255 255 255 / 0.10);
    --brand-deep: #9bd93e;
  }

  @media (min-width: 64em) {
    .hero { padding-block: var(--space-3xl) var(--space-xl); }
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-color: #0a100e;
  }


  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, rgb(8 13 11 / 0.92) 0%, rgb(8 13 11 / 0.35) 32%, rgb(8 13 11 / 0) 60%),
      linear-gradient(to right, rgb(8 13 11 / 0.86) 0%, rgb(8 13 11 / 0.55) 38%, rgb(8 13 11 / 0.08) 62%, rgb(8 13 11 / 0.15) 100%);
    pointer-events: none;
  }


  .hero__head { display: grid; gap: var(--space-l); }

  @media (min-width: 64em) {
    .hero__head {
      grid-template-columns: 7fr 5fr;
      column-gap: var(--space-2xl);

      align-items: start;
    }
  }

  .hero__title {
    font-size: var(--step-6);
    font-weight: 700;
    letter-spacing: -0.03em;
    max-inline-size: 16ch;
    text-shadow: 0 1px 24px rgb(8 13 11 / 0.5);
  }

  .hero__lead {
    color: var(--on-deep);
    font-size: var(--step-1);
    max-inline-size: 38ch;
  }

  .hero__tagline {
    max-inline-size: 74ch;
    padding-inline-start: var(--space-s);
    border-inline-start: 2px solid var(--gold);
    color: var(--on-deep);
    font-size: var(--step--1);
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-wrap: pretty;
  }

  .herocards { display: grid; gap: var(--space-m); }

  .herocards__stack {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background-color: var(--surface);
    backdrop-filter: blur(10px);
    transition: border-color .15s var(--ease);
  }

  .herocards__stack:hover { border-color: var(--brand); }

  .herocard {
    grid-area: 1 / 1;
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
    padding: var(--space-l);
    color: inherit;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--ease), visibility .5s;
  }
  .herocard[data-active] {
    opacity: 1;
    visibility: visible;
  }

  .herocard[data-active] { z-index: 1; }

  .herocard[data-leaving] {
    opacity: 1;
    visibility: visible;
    transition: none;
    z-index: 0;
    animation: herocard-slide-out .44s var(--ease) forwards;
  }
  .herocard[data-entering] {
    transition: none;
    animation: herocard-slide-in .44s var(--ease) forwards;
  }

  @keyframes herocard-slide-out {
    from { transform: translateX(0);     opacity: 1; }
    85%  {                               opacity: 1; }
    to   { transform: translateX(112%);  opacity: 0; }
  }
  @keyframes herocard-slide-in {
    from { transform: translateX(-112%); opacity: 1; }
    to   { transform: translateX(0);     opacity: 1; }
  }

  .herocard__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--brand-deep);
  }

  .herocard__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    font-stretch: var(--width-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-snug);
    color: var(--on-deep);
  }

  .herocard__desc {
    color: var(--on-deep-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .herocard__go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-2xs);
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--brand-deep);
  }
  .herocard__go .icon { transition: transform .15s var(--ease); }
  .herocard:hover .herocard__go .icon { transform: translateX(4px); }

  .herocards__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
  }

  .herocards__dots { display: flex; gap: var(--space-2xs); }

  .herocards__dot {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    margin-inline-start: -0.9rem;
  }
  .herocards__dot:first-child { margin-inline-start: 0; }
  .herocards__dot::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    border: 1px solid var(--rule-strong);
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
  }
  .herocards__dot:hover::before { border-color: var(--brand); }
  .herocards__dot[aria-current="true"]::before {
    background-color: var(--brand);
    border-color: var(--brand);
  }

  .yearbadge {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--gold);
    border-radius: var(--radius-s);
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
  }

  .yearbadge__num {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.45rem;
    background-color: var(--gold);
    color: var(--on-gold);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
    font-stretch: var(--width-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  .yearbadge__unit {
    display: flex;
    align-items: center;
    padding-inline: 0.45rem;
    background-color: color-mix(in srgb, var(--gold) 18%, transparent);
    font-family: var(--font-label);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gold);
  }

  .specstrip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--surface);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
  }
  @media (min-width: 40em) {
    .specstrip { grid-template-columns: repeat(4, 1fr); }
  }

  .specstrip__cell {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-3xs);
    padding: var(--space-m) var(--space-s);
    border-inline-start: 1px solid var(--rule);
    border-block-start: 1px solid var(--rule);
  }
  .specstrip__cell:nth-child(-n+2) { border-block-start: 0; }
  .specstrip__cell:nth-child(odd)  { border-inline-start: 0; }
  @media (min-width: 40em) {
    .specstrip__cell { border-block-start: 0; }
    .specstrip__cell:nth-child(odd) { border-inline-start: 1px solid var(--rule); }
    .specstrip__cell:first-child { border-inline-start: 0; }
  }
  @media (min-width: 64em) {
    .specstrip__cell { padding: var(--space-m) var(--space-l); }
  }

  .specstrip dt {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .specstrip dt .icon {
    flex: none;
    opacity: .55;
  }
  .specstrip dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    font-stretch: var(--width-display);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
}

@layer components {

  .statement { display: grid; gap: var(--space-l); }

  @media (min-width: 64em) {
    .statement {
      grid-template-columns: 7fr 5fr;
      column-gap: var(--space-2xl);
      align-items: end;
    }
  }

  .statement__line {
    font-family: var(--font-display);
    font-size: var(--step-5);
    font-weight: 700;
    font-stretch: var(--width-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
    color: var(--ink);
  }

  .statement__note {
    color: var(--ink-2);
    font-size: var(--step-1);
    max-inline-size: 42ch;
  }

  .statement__live {
    display: inline-block;
    inline-size: 0.4em;
    block-size: 0.4em;
    margin-inline-end: 0.42em;
    vertical-align: 0.2em;
    border-radius: 50%;
    background-color: var(--brand);
    box-shadow: 0 0 0 0.14em color-mix(in srgb, var(--brand) 25%, transparent);
  }

}

@layer components {

  .netroute { }

  .netroute__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block-end: var(--space-s);
  }

  .netroute__head--bare {
    justify-content: flex-end;
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--rule);
  }
  .netroute__title { font-size: var(--step-2); }
  .netroute__count {
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .netroute__line {
    position: relative;
    display: grid;
    gap: var(--space-l);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .netnode {
    position: relative;
    padding-inline-start: var(--space-l);
  }

  .netroute__line::before {
    content: "";
    position: absolute;
    inset-block: 0.55rem;
    inset-inline-start: 0.28rem;
    inline-size: 1px;
    background-color: var(--rule-strong);
  }

  .netnode__marker {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.35rem;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    background-color: var(--paper);
  }
  .netnode--primary .netnode__marker {
    border-color: var(--brand);
    background-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  }

  .netnode__code {
    display: block;
    font-family: var(--font-label);
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--ink);
  }
  .netnode__city {
    display: block;
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .netnode__count {
    display: inline-block;
    margin-block-start: var(--space-2xs);
    padding: 0.1rem var(--space-2xs);
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    background-color: var(--surface);
    font-family: var(--font-label);
    font-size: var(--step--2);
    color: var(--ink-2);
  }

  .netnode__peers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-2xs);
    margin-block-start: var(--space-2xs);
    padding: 0;
    list-style: none;
    font-family: var(--font-label);
    font-size: var(--step--2);
    color: var(--ink-2);
  }
  .netnode__peers li {
    padding: 0.1rem var(--space-2xs);
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    background-color: var(--surface);
    white-space: nowrap;
  }

  @media (min-width: 64em) {
    .netroute__line {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: var(--space-m);
      padding-block-start: var(--space-s);
    }
    .netroute__line::before {
      inset-block: auto;
      inset-block-start: calc(var(--space-s) + 0.28rem);
      inset-inline: 0.3rem 0.3rem;
      inline-size: auto;
      block-size: 1px;
    }
    .netnode { padding-inline-start: 0; padding-block-start: var(--space-l); }
    .netnode__marker { inset-block-start: var(--space-s); }

  .netnode__count {
    display: inline-block;
    margin-block-start: var(--space-2xs);
    padding: 0.1rem var(--space-2xs);
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    background-color: var(--surface);
    font-family: var(--font-label);
    font-size: var(--step--2);
    color: var(--ink-2);
  }

  .netnode__peers { flex-direction: column; align-items: flex-start; gap: var(--space-3xs); }
  }
}

@layer components {

  .servicelist { list-style: none; padding: 0; border-block-start: 1px solid var(--rule); }
  .servicelist > li { border-block-end: 1px solid var(--rule); }

  .servicerow {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-s) var(--space-m);
    padding: var(--space-m) var(--space-2xs);
    color: inherit;
    text-decoration: none;
    transition: background-color .15s var(--ease), padding-inline .15s var(--ease);
  }
  .servicerow:hover {
    background-color: var(--surface);
    color: inherit;
  }

  .servicerow__icon { grid-column: 1; grid-row: 1; color: var(--brand-deep); padding-block-start: 0.15rem; }
  .servicerow__title,
  .servicerow__desc,
  .servicerow__go { grid-column: 2; }

  .servicerow__title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    font-stretch: var(--width-display);
    letter-spacing: var(--tracking-display);
    color: var(--ink);
  }
  .servicerow:hover .servicerow__title { color: var(--brand-deep); }

  .servicerow__desc {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--ink-2);
    max-inline-size: 62ch;
  }

  .servicerow__go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    grid-column: 2;
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--data);
  }
  .servicerow__go .icon { transition: transform .15s var(--ease); }
  .servicerow:hover .servicerow__go .icon { transform: translateX(4px); }

  @media (min-width: 64em) {
    .servicerow {
      grid-template-columns: auto minmax(0, 22rem) minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--space-l);
      padding-block: var(--space-l);
    }
    .servicerow__icon { grid-column: 1; grid-row: auto; }
    .servicerow__title { grid-column: 2; }
    .servicerow__desc { grid-column: 3; margin-block-start: 0; }
    .servicerow__go { grid-column: 4; }
  }

  .card {
    display: flex;
    flex-direction: column;
    padding: var(--space-l);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background-color: var(--surface);
  }

  .card > .btn:last-child { margin-block-start: auto; align-self: flex-start; }
  .card--link { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
  .card--link:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-m); }

  .card__icon { color: var(--brand-deep); }
  .card__title { font-size: var(--step-2); }
  .card p { color: var(--ink-2); }

  .card--marked { border-block-start: 2px solid var(--brand); }

  .key-list { list-style: none; padding: 0; max-inline-size: 72ch; }
  .key-list li {
    position: relative;
    padding-inline-start: var(--space-m);
    color: var(--ink-2);
  }
  .key-list li + li { margin-block-start: var(--space-2xs); }
  .key-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.72em;
    inline-size: 0.5rem;
    block-size: 1px;
    background-color: var(--brand);
  }

  /* Spec sheet: one row per infrastructure layer. On wide screens the
     layer name holds a narrow left column and stays in view while its
     list scrolls past; rows are separated by a rule because each is a
     distinct layer of the facility. */
  .spec-rows { border-block-start: 1px solid var(--rule); }
  .spec-row {
    display: grid;
    gap: var(--space-s);
    padding-block: var(--space-xl);
    border-block-end: 1px solid var(--rule);
  }
  .spec-row__title {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    font-size: var(--step-2);
  }
  /* Each layer carries its own mark (shield: network/DDoS, bolt: power,
     lock: physical access) in a quiet tile, so the three rows can be told
     apart at a glance without adding a label. Decorative: aria-hidden. */
  .spec-row__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    color: var(--brand-deep);
  }
  @media (min-width: 64em) {
    .spec-row {
      grid-template-columns: 4fr 8fr;
      column-gap: var(--space-2xl);
      align-items: start;
    }
    .spec-row__title {
      position: sticky;
      inset-block-start: calc(4rem + var(--space-m));
    }
  }

  /* Related-page links as a grid of ruled rows instead of a bulleted
     column, so seven short links use the width instead of a strip. */
  .link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    column-gap: var(--space-xl);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .link-grid a {
    display: block;
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
  }
  .link-grid a:hover { color: var(--brand-deep); border-block-end-color: currentColor; }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0.1rem var(--space-2xs);
    border-radius: var(--radius-s);
    font-family: var(--font-label);
    font-size: var(--step--2);
    font-weight: 500;
    white-space: nowrap;
  }
  .badge::before {
    content: "";
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: 50%;
    background-color: currentColor;
  }
  .badge--ok { color: var(--ok); background-color: color-mix(in srgb, var(--brand) 14%, transparent); }
  .badge--ask { color: var(--signal); background-color: color-mix(in srgb, var(--signal-fill) 18%, transparent); }
  .badge--ipv4 { color: var(--tag-neutral); background-color: var(--tag-neutral-soft); }
  .badge--ipv6 { color: var(--tag-accent); background-color: var(--tag-accent-soft); }

  a.badge {
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s var(--ease);
  }
  a.badge--ok:hover { background-color: color-mix(in srgb, var(--brand) 26%, transparent); }
  a.badge--ask:hover { background-color: color-mix(in srgb, var(--signal-fill) 32%, transparent); }
  a.badge:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
  @media (prefers-reduced-motion: reduce) {
    a.badge { transition: none; }
  }
}

@layer components {

  .page-hero__figure {
    position: relative;
    background-color: var(--paper);
    isolation: isolate;
  }
  .page-hero__figure img {
    inline-size: 100%;
    block-size: var(--band-h);
    object-fit: cover;
    filter: saturate(.82) brightness(.94) contrast(1.05);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--band-fade) * 100%), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--band-fade) * 100%), transparent 100%);
  }

  .page-hero__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgb(8 13 11 / 0.32) 0%, rgb(8 13 11 / 0) 55%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--band-fade) * 100%), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 calc(var(--band-fade) * 100%), transparent 100%);
  }

  .page-hero {
    padding-block: var(--space-xl);
    background-color: var(--paper);
  }

  .page-hero__figure + .page-hero {
    position: relative;
    margin-block-start: calc(var(--band-h) * (var(--band-fade) - 1));

    padding-block-start: calc(var(--band-h) * 0.28);
    padding-block-end: var(--space-xl);
    background-color: transparent;
  }

  .page-hero h1 { font-size: var(--step-5); }

  .breadcrumb { border-block: 1px solid var(--rule); background-color: var(--surface); }

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-2xs);
    list-style: none;
    margin: 0;
    padding-block: var(--space-xs);
    padding-inline: 0;
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: 0.04em;
  }

  @media (max-width: 63.99em) {
    .breadcrumb__list { font-size: 0.66rem; letter-spacing: 0.02em; }
  }

  .breadcrumb__list li { display: flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; }
  .breadcrumb__list li + li::before { content: "/"; color: var(--rule-strong); }
  .breadcrumb__list a { color: var(--ink-3); text-decoration: none; }
  .breadcrumb__list a:hover { color: var(--brand-deep); }
  .breadcrumb__list [aria-current="page"] { color: var(--ink); }

  .ctaband {
    position: relative;
    display: grid;
    align-items: center;
    min-block-size: 15rem;
    padding-block: var(--space-2xl);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
  }

  .ctaband__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .ctaband::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, rgb(18 20 18 / 0.90) 0%, rgb(18 20 18 / 0.82) 55%, rgb(18 20 18 / 0.72) 100%);
  }

  .ctaband { --mark: var(--paper); }
  .section--surface + .ctaband { --mark: var(--surface); }
  .section--sunken  + .ctaband { --mark: var(--surface-sunken); }

  .ctaband__mark {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: max(var(--space-m), calc(50% - var(--container) / 2 + var(--space-m)));
    z-index: 1;
    inline-size: 4.5rem;
    block-size: 2rem;

    background-color: var(--ctaband-mark, var(--mark));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  @media (min-width: 64em) {
    .ctaband__mark {
      inset-inline-start: max(var(--space-l), calc(50% - var(--container) / 2 + var(--space-l)));
      inline-size: 5rem;
      block-size: 2.25rem;
    }
  }

  .ctaband__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
  }

  .ctaband__text {
    margin: 0;
    max-inline-size: 46ch;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    font-stretch: var(--width-display);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-display);
    color: #fff;
  }

  .btn--ghost {
    border-color: rgb(255 255 255 / 0.7);
    color: #fff;
    background-color: transparent;
  }
  .btn--ghost:hover {
    border-color: #fff;
    background-color: #fff;
    color: var(--surface-deep);
  }
}

@layer components {

  .spec-table {
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background-color: var(--surface);

    overflow-x: auto;
    overflow-y: hidden;
  }
  .spec-table table { font-size: var(--step--1); }

  .spec-table caption {
    padding: var(--space-m) var(--space-m) var(--space-s);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    font-stretch: var(--width-display);
    letter-spacing: var(--tracking-display);
    text-align: start;
    color: var(--ink);
  }

  .spec-table th,
  .spec-table td {
    padding: var(--space-xs) var(--space-m);
    border-block-end: 1px solid var(--rule);
  }

  .spec-table thead th {
    font-family: var(--font-label);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
    background-color: var(--surface-2);
    border-block-end-color: var(--rule-strong);
  }

  .spec-table__th {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
  }
  .spec-table__th .icon {
    flex: none;
    color: var(--ink-3);
  }

  .spec-table__level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    background-color: var(--brand);
    color: var(--on-brand);
    font-family: var(--font-label);
    font-size: var(--step--1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .spec-table tbody tr:last-child th,
  .spec-table tbody tr:last-child td { border-block-end: 0; }

  .spec-table tbody tr:nth-child(even) { background-color: var(--table-stripe); }
  .spec-table tbody tr:hover { background-color: var(--surface-2); }

  .spec-table tbody th { font-weight: 600; color: var(--ink); }

  .spec-table__num {
    font-family: var(--font-label);
    /* break-word, not anywhere: "100Mbps/Unmetered" and "E3-1220" were being
       split mid-token ("Unmeter/ed") just to narrow the column. */
    overflow-wrap: break-word;
    color: var(--ink-2);
  }
  .spec-table__price {
    font-family: var(--font-label);
    font-weight: 700;
    white-space: nowrap;
    color: var(--ink);
  }

  @media (max-width: 63.99em) {

    .spec-table { overflow-x: visible; }
    .spec-table table,
    .spec-table tbody { display: block; inline-size: 100%; }
    .spec-table caption { display: block; }

    .spec-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .spec-table tbody tr {
      display: block;
      padding: var(--space-s) var(--space-m);
      border-block-end: 1px solid var(--rule);
    }
    .spec-table tbody tr:last-child { border-block-end: 0; }

    .spec-table tbody th {
      display: block;
      inline-size: 100%;
      border: 0;
      padding: 0 0 var(--space-2xs);
      margin-block-end: var(--space-2xs);
      border-block-end: 1px solid var(--rule);
      text-align: start;
      text-wrap: balance;
    }

    .spec-table tbody td {
      display: flex;
      justify-content: flex-end;
      align-items: baseline;
      gap: var(--space-2xs);
      border: 0;
      padding: var(--space-3xs) 0;
      text-align: end;
    }

    .spec-table tbody td { white-space: normal; }
    .spec-table__price { white-space: normal; }
    .spec-table tbody td::before {
      margin-inline-end: auto;
      text-align: start;
      flex: none;
    }
    .spec-table tbody th { font-size: var(--step-0); }
    .spec-table tbody td::before {
      content: attr(data-label);
      font-family: var(--font-label);
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-label);
      color: var(--ink-3);
    }
  }

  @media (min-width: 40em) and (max-width: 63.99em) {
    .spec-table tbody {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
      gap: var(--space-s);
      padding: var(--space-m);
    }
    .spec-table tbody tr,
    .spec-table tbody tr:last-child,
    .spec-table tbody tr:nth-child(even) {
      padding: var(--space-s);
      border: 1px solid var(--rule);
      border-radius: var(--radius-s);
      background-color: transparent;
    }
  }

  .price-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background-color: var(--surface);
    overflow: hidden;
  }

  .price-card__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-m);
    border-block-end: 1px solid var(--rule);
  }

  .price-card__name { font-size: var(--step-0); }

  .price-card__specs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3xs) var(--space-m);
    margin: 0;
    padding: var(--space-m);
    font-size: var(--step--1);
  }

  .price-card__specs dt {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
  }
  .price-card__specs dt .icon { flex: none; color: var(--ink-3); }
  .price-card__specs dd { margin: 0; font-family: var(--font-label); color: var(--ink-2); }

  .price-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    flex-wrap: wrap;
    margin-block-start: auto;
    padding: var(--space-m);
    border-block-start: 1px solid var(--rule);
    background-color: var(--surface-2);
  }
  .price-card__amount {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
  }
  .price-card__price {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }

  .vat {
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 400;
    color: var(--ink-2);
  }

  .tabrail {
    border-block-end: 1px solid var(--rule);
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tabrail__list {
    display: flex;
    gap: var(--space-m);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media (min-width: 64em) {
    .tabrail { overflow-x: visible; }
    .tabrail__list { flex-wrap: wrap; row-gap: var(--space-3xs); }
  }

  .tabrail__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-xs);
    border-block-end: 2px solid transparent;
    color: var(--ink-3);
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .tabrail__link:hover { color: var(--ink); }
  .tabrail__link[aria-selected="true"] {
    border-block-end-color: var(--brand);
    color: var(--ink);
    font-weight: 600;
  }

  .tabpanel[hidden] { display: none; }

  .tabpanel:not([hidden]) + .tabpanel:not([hidden]) { margin-block-start: var(--space-2xl); }
}

@layer components {

  .accordion { border-block-start: 1px solid var(--rule); }
  .accordion > details { border-block-end: 1px solid var(--rule); }

  .accordion summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: var(--space-m);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    font-stretch: var(--width-display);
    cursor: pointer;
    list-style: none;
  }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion summary::after {
    content: "+";
    font-family: var(--font-label);
    font-size: var(--step-2);
    font-weight: 400;
    color: var(--brand-deep);
    line-height: 1;
  }
  .accordion details[open] summary::after { content: "\2212"; }
  .accordion summary:hover { color: var(--brand-deep); }

  .accordion__body {
    padding-block-end: var(--space-m);
    color: var(--ink-2);
    max-inline-size: 68ch;
  }

  .legal { --flow-space: var(--space-s); max-inline-size: 68ch; }
  .legal h2,
  .legal h3 {
    margin-block-start: var(--space-xl);
    font-size: var(--step-2);
  }
  .legal h2:first-child,
  .legal h3:first-child { margin-block-start: 0; }
  .legal p { color: var(--ink-2); }
  .legal strong { color: var(--ink); }
  .legal ul { color: var(--ink-2); padding-inline-start: var(--space-m); }
  .legal li + li { margin-block-start: var(--space-3xs); }
}

@layer components {

  .field { display: grid; gap: var(--space-3xs); }
  .field label {
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .field input,
  .field textarea {
    padding: var(--space-xs);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-m);
    background-color: var(--surface);
    color: var(--ink);
    font-size: var(--step-0);
  }
  .field input:focus-visible,
  .field textarea:focus-visible { border-color: var(--brand); }
  .field textarea { resize: vertical; }

  /* Inline validation errors (per-field) and form-level alerts. */
  .field__error {
    margin: var(--space-3xs) 0 0;
    font-size: var(--step--2);
    color: var(--danger);
  }
  .field [aria-invalid="true"] { border-color: var(--danger); }
  .form-alert {
    border: 1px solid var(--danger);
    border-radius: var(--radius-m);
    padding: var(--space-s);
    color: var(--ink);
    background-color: var(--surface);
  }
  .form-alert ul { margin: 0; padding-inline-start: var(--space-m); }

  .contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
  }

  .infopanel {
    display: grid;
    gap: var(--space-l);
    padding: var(--space-l);
    border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--surface));
    border-radius: var(--radius-m);
    background-color: var(--surface);
  }
  @media (min-width: 40em) {
    .infopanel { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
  }
  @media (min-width: 64em) {
    .infopanel { padding: var(--space-xl); column-gap: var(--space-2xl); }
  }

  .infopanel dt {
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .infopanel dd {
    margin: 0;
    margin-block-start: var(--space-3xs);
    color: var(--ink);
    text-wrap: pretty;
  }

  .infopanel dd.text-data { font-family: var(--font-label); font-size: var(--step--1); }

  .contact {
    display: grid;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background-color: var(--surface);
    overflow: hidden;
  }
  @media (min-width: 64em) {
    .contact { grid-template-columns: 5fr 7fr; }
  }

  .contact__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-l);
    min-block-size: 22rem;
    padding: var(--space-l);
    isolation: isolate;
    color: var(--on-deep);
  }
  .contact__panel img {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .contact__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
      rgb(19 26 24 / 0.45) 0%,
      rgb(19 26 24 / 0.78) 55%,
      rgb(19 26 24 / 0.92) 100%);
  }

  .contact__details { display: grid; gap: var(--space-s); margin: 0; }
  .contact__details > div { padding-block-start: var(--space-s); border-block-start: 1px solid rgb(255 255 255 / 0.18); }
  .contact__details > div:first-child { padding-block-start: 0; border-block-start: 0; }

  .contact__details dt {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--brand);
  }
  .contact__details dd {
    margin: 0;
    margin-block-start: var(--space-3xs);
    font-size: var(--step-1);
    color: var(--on-deep);
  }
  .contact__details a { color: var(--on-deep); text-decoration-color: rgb(255 255 255 / 0.4); }
  .contact__details a:hover { color: var(--brand); }

  .contact__body { padding: var(--space-l); }
  @media (min-width: 64em) {
    .contact__body { padding: var(--space-xl); }
  }

  .form-grid { display: grid; gap: var(--space-m); }
  @media (min-width: 40em) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-grid > .field--wide { grid-column: 1 / -1; }
  }

  .contact__map { margin-block-start: var(--space-l); }

  .contact-map {
    display: block;
    inline-size: 100%;
    block-size: 26rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background-color: var(--surface-2);
  }

  .notice {
    padding: var(--space-m);
    border: 1px solid var(--rule);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--radius-m);
    background-color: var(--surface);
  }
  .notice p { margin: 0; color: var(--ink-2); }

  /* --- Data state -------------------------------------------------------
     Shown when a data surface has nothing to render (empty network list,
     a category with no listable packages). Border-first like .notice, with
     a dashed spine so it reads as "pending" rather than "broken", and it
     never relies on colour alone — the mark is a shape, the sentence is text. */
  .datastate {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    padding: var(--space-m);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-m);
    background-color: var(--surface-2);
    color: var(--ink-2);
  }

  .datastate--inline {
    padding-block: var(--space-s);
    padding-inline: var(--space-m);
  }

  .datastate__mark {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    background-color: var(--surface);
    transform: translateY(-1px);
  }

  .datastate__text { margin: 0; }

  /* The mark carries no motion: a pulsing dot would read as "live data
     loading", which is exactly the wrong promise for an empty state. */
}

@layer components {

  .site-footer {
    padding-block: var(--space-2xl) var(--space-l);
    background-color: var(--footer-bg);
    color: var(--on-footer);
    font-size: var(--step--1);
    --rule: var(--footer-rule);
  }
  .site-footer__title {
    font-family: var(--font-label);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--on-footer);
    padding-block-end: var(--space-s);
    margin-block-end: var(--space-s);
    border-block-end: 1px solid var(--rule);
  }
  .site-footer ul { list-style: none; margin: 0; padding: 0; }

  .site-footer ul li + li { margin-block-start: var(--space-2xs); }

  .site-footer__social a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
  }
  .site-footer__social .icon {
    flex: none;
    opacity: .85;
  }
  .site-footer__social a:hover .icon { opacity: 1; }
  .site-footer a {
    color: var(--on-footer);
    text-decoration: none;
    font-weight: 500;
    transition: opacity .15s var(--ease);
  }
  .site-footer a:hover { opacity: 1; color: var(--on-footer); text-decoration: underline; }
  .site-footer__address {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .site-footer__address .icon {
    inline-size: 1.15rem;

    block-size: calc(1.15rem * 2 / 3);
    border-radius: 1px;
  }

  .site-footer__bottom {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--rule);
    font-family: var(--font-label);
    font-size: var(--step--2);
    color: var(--on-footer);
    opacity: .9;
  }
  @media (max-width: 63.99em) {

    .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
    .site-footer__address { font-size: 0.62rem; }
  }

  .gdpr {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-banner);
    padding: var(--space-m);

    padding-block-end: calc(var(--space-m) + env(safe-area-inset-bottom));
    background-color: var(--surface);
    border-block-start: 1px solid var(--rule-strong);
    box-shadow: var(--shadow-l);
    font-size: var(--step--1);
  }
  .gdpr[hidden] { display: none; }
  .gdpr__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
  }
  .gdpr p { margin: 0; color: var(--ink-2); max-inline-size: 70ch; }
}