/*
 * inetz.com site styles.
 * Bootstrap 5 supplies the reset, grid, collapse, carousel and modal behavior.
 * Everything below is the site design, ported from the legacy Oxygen (WordPress) build.
 * Breakpoints follow Bootstrap: lg < 992px, md < 768px, and a 480px phone step.
 */

:root {
    --inetz-orange: #ff5102;
    --inetz-blue: #3b5c89;
    --inetz-gray: #d7d7d7;
    --inetz-dark: #1f1f1f;
    --inetz-light: #f4f2ee;        /* warm off-white band */
    --inetz-orange-deep: #d94300;  /* orange for icons on light backgrounds (about 4:1, the brand orange is about 2.9:1) */
    --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-label: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-alt: 'Familjen Grotesk', 'Space Grotesk', system-ui, sans-serif;
    --header-h: 62px;

    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 16px;
    --bs-body-line-height: 1.6;
    --bs-body-color: #404040;
}

html { scroll-padding-top: var(--header-h); }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #404040;
    background: #000;
}

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

.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 3000; background: #fff; color: #000; padding: .5rem 1rem; }

/* ---------- Layout primitives ---------- */

.container-site { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 20px; }

.band { padding-block: 75px; }
.band--black { background: #000; color: #fff; }
.band--orange { background: var(--inetz-orange); }
.band--blue { background: var(--inetz-blue); color: #fff; }
.band--dark { background: var(--inetz-dark); color: #fff; }
.band--light { background: var(--inetz-light); color: #000; }
.band--dots {
    background: var(--inetz-gray) url('/wp-content/uploads/2026/02/gray-dots-bg-scaled.webp') center / cover;
    color: #000;
}
.band--tight-top { padding-top: 20px; }

.eyebrow {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.6;
    text-transform: uppercase;
    color: #000;
    margin: 0;
}
.eyebrow--light { color: #fff; }

.section-head { display: flex; flex-wrap: wrap; width: 100%; }
.section-head__main { flex: 0 0 60%; max-width: 60%; }

.display-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 5rem;
    line-height: .88;
    text-transform: uppercase;
    margin: 30px 0 0;
    color: #000;
}
.display-title--md { font-size: 4rem; line-height: 1; padding-top: 0; }
.display-title--sm { font-size: 3rem; line-height: 1; }
.display-title--light,
.band--black .display-title { color: #fff; }

/* Buttons */
.btn-inetz {
    display: inline-block;
    background: var(--inetz-orange);
    border: 1px solid var(--inetz-orange);
    color: #000;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1.6;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 10px 16px;
    border-radius: 5px;
}
.btn-inetz:hover, .btn-inetz:focus-visible { background: #e24800; border-color: #e24800; color: #000; }
.btn-inetz--form { font-size: 1.2rem; border: 0; cursor: pointer; }

/* ---------- Header and menu ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.site-header__inner {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 20px;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-header__logo { display: block; line-height: 0; margin-left: 16px; opacity: .7; transition: opacity .2s ease; }
.site-header__logo:hover, .site-header__logo:focus-visible { opacity: 1; }
/* Natural size is 128x25; the live site adds .5em of vertical padding, which makes the 41px header logo. */
.site-header__logo img { display: block; width: 128px; height: 25px; padding: 8px 0; box-sizing: content-box; }
.menu-toggle { background: none; border: 0; color: #d9d9d9; padding: 10px; margin-right: 10px; line-height: 0; cursor: pointer; }
.menu-toggle:hover, .menu-toggle:focus-visible { color: #fff; }

/* Desktop menu: a rounded bar at the right of the header. An orange pill (.site-nav__indicator)
   glides to the hovered or focused item and rests on the current page. The phone menu (hamburger
   and full screen overlay) is used below 992px. site.js positions the pill and adds .js-nav. */
.site-nav { display: none; align-items: center; gap: 10px; }
.site-nav__track {
    position: relative;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}
.site-nav__list { position: relative; z-index: 1; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav__link {
    display: flex; align-items: center; gap: 12px;
    padding: .55rem 1.35rem .55rem 1.15rem;
    border-radius: 999px;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #d9d9d9;
    text-decoration: none;
    transition: color .2s ease;
}
.site-nav__link.is-under { color: #000; }
/* While hiring: an orange outline round the Careers link (it is hidden under the pill when the pill is on it). */
.site-nav__link--hiring { box-shadow: inset 0 0 0 1.5px var(--inetz-orange); color: #fff; }
.site-nav__link--hiring.is-under, .site-nav__link--hiring[aria-current="page"] { color: #000; }
/* Icons are drawn with the text color, so they follow it (black under the pill, orange on the outlined button). */
.icon { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-nav__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-nav__indicator {
    position: absolute; z-index: 0; left: 0; top: 0;
    width: 0; height: 0;
    border-radius: 999px;
    background: var(--inetz-orange);
    opacity: 0;
    pointer-events: none;
}
.site-nav.is-ready .site-nav__indicator {
    transition: transform .34s cubic-bezier(.4, 0, .2, 1), width .34s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
/* Without JavaScript the item itself fills on hover. */
.site-nav:not(.js-nav) .site-nav__link:hover,
.site-nav:not(.js-nav) .site-nav__link[aria-current="page"] { background: var(--inetz-orange); color: #000; }
/* Call to action: an outlined pill beside the bar that fills orange on hover and on its own page. */
.site-nav__cta {
    display: flex; align-items: center; gap: 12px;
    padding: calc(.55rem + 4px) 1.5rem calc(.55rem + 4px) 1.25rem;
    border: 1px solid var(--inetz-orange);
    border-radius: 999px;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--inetz-orange);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.site-nav__cta:hover, .site-nav__cta[aria-current="page"] { background: var(--inetz-orange); color: #000; }
.site-nav__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 992px) {
    .site-nav { display: flex; }
    .menu-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-nav.is-ready .site-nav__indicator, .site-nav__link, .site-nav__cta { transition: none; }
}

.site-menu .modal-content { background: #000; color: #d9d9d9; border: 0; border-radius: 0; }
.site-menu .modal-dialog { margin: 0; }
.site-menu__close {
    position: absolute; top: 14px; right: max(20px, calc((100vw - 1440px) / 2 + 20px));
    background: none; border: 0; color: #fff; padding: 10px; line-height: 0; cursor: pointer;
}
.site-menu__nav { margin: auto; text-align: center; }
.site-menu__nav ul { list-style: none; margin: 0; padding: 0; }
.site-menu__nav a {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 5rem;
    line-height: 1.05;
    text-transform: uppercase;
    text-decoration: none;
    color: #d9d9d9;
}
.site-menu__nav a:hover, .site-menu__nav a:focus-visible { color: var(--inetz-orange); }
.site-menu__tag { display: inline-block; margin-left: .75rem; padding: .3rem .8rem; border: 1px solid var(--inetz-orange); border-radius: 999px; vertical-align: middle; font-family: var(--font-label); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inetz-orange); }

/* ---------- Footer ---------- */

.site-footer { background: #000; color: #fff; border-top: 1px solid rgba(255, 255, 255, .14); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; align-items: start; padding-block: 3.25rem 2.5rem; }
.site-footer__logo { display: inline-block; line-height: 0; opacity: .9; transition: opacity .2s ease; }
.site-footer__logo:hover, .site-footer__logo:focus-visible { opacity: 1; }
.site-footer__logo img { display: block; width: 128px; height: 25px; }
.site-footer__commitment { max-width: 30rem; margin: 1.5rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; color: #fff; }
.site-footer__commitment-accent { display: block; color: var(--inetz-orange); }
.site-footer__contact { margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: .95rem; line-height: 1.5; color: #cfcfcf; }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.site-footer__contact li + li { margin-top: .35rem; }
.site-footer__contact .icon { margin-top: .25em; color: var(--inetz-orange); }
.site-footer__contact a { color: inherit; text-decoration: none; }
.site-footer__contact a:hover, .site-footer__contact a:focus-visible { color: #fff; text-decoration: underline; }

/* Two columns of links, like the footer navigation on phase2.io. */
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.site-footer__heading { margin: 0 0 1rem; font-family: var(--font-label); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a; }
.site-footer__col ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col li + li { margin-top: .6rem; }
.site-footer__col a {
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1;
    text-transform: uppercase; color: #fff; text-decoration: none; transition: color .2s ease;
}
.site-footer__col a:hover, .site-footer__col a:focus-visible { color: var(--inetz-orange); }
/* "Cookie Preferences" is a button (it opens the consent window) drawn like the links around it. */
.site-footer__linkbutton {
    padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1;
    text-transform: uppercase; color: #fff; transition: color .2s ease;
}
.site-footer__linkbutton:hover, .site-footer__linkbutton:focus-visible { color: var(--inetz-orange); }
.site-footer__social { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__social svg { width: 22px; height: 22px; flex: 0 0 auto; }
.site-footer__social svg path { fill: currentColor; }
.careers-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
/* From 992px the row uses the same two columns as the list and panel below (.svc), so the box lines up with the left edge of the panel. */
@media (min-width: 992px) { .careers-head__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: end; } }
.hiring-role { text-decoration: underline; text-decoration-color: var(--inetz-orange); text-decoration-thickness: .12em; text-underline-offset: .22em; }
.careers-hiring { width: 100%; max-width: 26rem; padding: 1.1rem 1.35rem 1.25rem; border: 2px solid var(--inetz-orange); border-radius: 16px; background: rgba(255, 255, 255, .78); }
.careers-hiring__label { margin: 0 0 .5rem; font-family: var(--font-label); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inetz-orange-deep); }
.careers-hiring ul { margin: 0; padding: 0; list-style: none; }
.careers-hiring a { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid rgba(0, 0, 0, .14); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; text-decoration: none; color: #000; }
.careers-hiring li:first-child a { border-top: 0; }
.careers-hiring a:hover, .careers-hiring a:focus-visible { color: var(--inetz-orange-deep); }
.site-footer__hiring { max-width: 30rem; margin: 1.75rem 0 0; padding: .9rem 1.15rem 1rem; border: 1px solid var(--inetz-orange); border-radius: 14px; font-family: var(--font-label); font-size: 1rem; line-height: 1.45; color: #d9d9d9; }
.site-footer__hiring-label { display: block; margin-bottom: .2rem; font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inetz-orange); }
.site-footer__hiring a { display: inline-block; margin-left: .35rem; color: var(--inetz-orange); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__hiring a:hover, .site-footer__hiring a:focus-visible { color: #fff; }
.site-footer__copy { margin: 0; padding-block: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .85rem; color: #9a9a9a; }

/* ---------- Home ---------- */

/* Logo intro (public/assets/js/logo-intro.js): the two crescents of the eye fly in and snap onto the header
   logo. The real logo stays hidden while that runs (html.js-intro, set on Home only). */
html.js-intro .site-header__logo img { opacity: 0; }
.logo-intro { position: fixed; inset: 0; z-index: 1070; pointer-events: none; overflow: hidden; }
.logo-intro__piece { position: absolute; overflow: visible; transform-origin: 50% 50%; will-change: transform, opacity, filter; }
.logo-intro__ring { display: none; position: absolute; width: 56px; height: 56px; border: 2px solid var(--inetz-orange); border-radius: 50%; transform: translate(-50%, -50%); }

/* The pattern is its own layer so its strength can be tuned without touching the text.
   --hero-pattern: opacity of the pattern. The legacy WordPress site used full strength (1), which
   was very busy. 0.26 is the chosen strength (Tom, 2026-11-03: first 0.35, then another 25%
   quieter). Lower is quieter (0.18 is almost plain black).
   --hero-mask: optional mask for the pattern, for example a vignette that calms the middle. */
.hero { --hero-pattern: .26; --hero-code: .6; position: relative; background: #000; isolation: isolate; }
/* With JavaScript the pattern image is replaced by faint animated PHP code (public/assets/js/hero-code.js, a canvas).
   --hero-code is the strength of that layer (1 is full, lower is quieter). Without JavaScript the pattern stays. */
.hero__code { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: var(--hero-code, .6); }
.hero.has-code::before { opacity: 0; }
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    /* The image (hero-bg-scaled.webp) is only the no-JavaScript fallback, set in a <noscript> style on Home, so
       visitors with JavaScript do not download it. */
    opacity: var(--hero-pattern, 1);
    -webkit-mask-image: var(--hero-mask, none);
    mask-image: var(--hero-mask, none);
}
/* The hero scales with the window: the headline is 7vw wide-based but also limited by the window's
   height (11vh), up to the original 7rem. In a short window (not full screen) the hero shrinks
   instead of filling the screen. --hero-font drives the line size and the stepped offset. */
.hero__title { --hero-font: clamp(2rem, min(7vw, 11vh), 7rem); }
.hero__inner { padding-top: clamp(2rem, 5vh, 3rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); display: flex; flex-direction: column; align-items: center; }
.hero__title { display: flex; flex-direction: column; align-items: center; margin: 0; font: inherit; }
.hero__line {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--hero-font);
    line-height: 1;
    text-transform: uppercase;
    background: #000;
    color: #fff;
    padding: 0 20px;
}
.hero__line--build { position: relative; right: 1rem; padding-top: 15px; }
.hero__custom-wrap { display: flex; flex-direction: column; align-items: flex-start; padding-left: calc(var(--hero-font) * 2.7); }
.hero__line--custom { color: var(--inetz-orange); }
.hero__line--app { align-self: flex-start; }
.hero__line--solutions { align-self: flex-start; padding-bottom: 15px; }
.hero__cta { background: #000; padding: 10px; margin-top: -1px; }
.hero__hiring { margin: 1.25rem 0 0; padding: .55rem 1.2rem; border: 1px solid var(--inetz-orange); border-radius: 999px; background: #000; font-family: var(--font-label); font-size: 1rem; line-height: 1.4; text-align: center; color: #d9d9d9; }
.hero__hiring-label { margin-right: .4rem; font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inetz-orange); }
.hero__hiring a { margin-left: .25rem; color: var(--inetz-orange); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.hero__hiring a:hover, .hero__hiring a:focus-visible { color: #fff; }

.about-lead { color: #fff; padding: 30px 10px 0 0; margin: 0; }
.about-lead__accent { color: var(--inetz-orange); }
/* The hero above is black too, so a hairline separates the two. */
.hero + .home-about { border-top: 1px solid rgba(255, 255, 255, .14); }

.features { padding-top: 3em; margin: 0; }
.features__item { display: flex; flex-direction: column; align-items: flex-start; }
.features__item img { margin-bottom: .5rem; }
/* Fixed icon box so the three captions line up whatever each icon's height is. */
.features__icon { display: flex; align-items: center; height: 81px; margin-bottom: .5rem; }
.features__icon img { margin: 0; filter: invert(1); } /* the icons are black artwork, white on the black band */
.features__text { font-family: var(--font-alt); font-size: 2rem; line-height: 1.125; color: #e6e6e6; margin: 0; }

.services-teaser__inner { display: flex; flex-direction: column; align-items: center; }
.services-teaser__body { margin-top: 1em; width: 100%; max-width: 660px; padding: 15px 10px 0; }
.services-teaser__more { margin: 0 0 30px; }
.services-teaser__text { font-size: 1.6rem; line-height: 1.25; font-weight: 500; color: #000; margin: 0 0 30px; }

.clients__grid { margin-top: 2rem; padding: 0; }
.clients__item { display: flex; align-items: center; justify-content: center; }
.clients__item img { max-width: 100%; height: auto; }

.testimonials__title { color: #111; margin-top: 30px; }
.testimonials__carousel { position: relative; margin-top: 0; padding-inline: 46px; }
.testimonial { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: center; min-height: 21em; color: #fff; }
.testimonial__quote { flex: 0 0 60%; max-width: 60%; margin: 0; font-size: 1.25em; padding-right: 1rem; }
.testimonial__author { flex: 0 0 40%; max-width: 40%; margin: 0; padding-left: 4rem; color: #fff; }
.testimonial--long .testimonial__quote { flex-basis: 70%; max-width: 70%; font-size: 1.1em; line-height: 1.25; }
.testimonial--long .testimonial__author { flex-basis: 30%; max-width: 30%; padding-left: 2rem; }
.testimonials__carousel .carousel-control-prev,
.testimonials__carousel .carousel-control-next { width: 30px; opacity: 1; }
.testimonials__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255, 255, 255, .25); color: #fff; line-height: 0;
}
.testimonials__arrow svg { display: block; }
/* Cross fade: Bootstrap's fade keeps the outgoing slide fully visible for the whole
   transition and then hides it instantly. Fade it out while the next one fades in,
   at the same 750ms the legacy slider used. */
.testimonials__carousel.carousel-fade .carousel-item { transition: opacity .75s ease; }
.testimonials__carousel.carousel-fade .active.carousel-item-start,
.testimonials__carousel.carousel-fade .active.carousel-item-end { transition: opacity .75s ease; }
@media (prefers-reduced-motion: reduce) {
    .testimonials__carousel.carousel-fade .carousel-item,
    .testimonials__carousel.carousel-fade .active.carousel-item-start,
    .testimonials__carousel.carousel-fade .active.carousel-item-end { transition: none; }
}
.testimonials__carousel .carousel-control-prev:hover .testimonials__arrow,
.testimonials__carousel .carousel-control-next:hover .testimonials__arrow { background: rgba(255, 255, 255, .5); }

/* ---------- About ---------- */

.about-hero__headline { --about-size: 9rem; position: relative; }
.about-hero__line {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--about-size);
    line-height: .88;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.about-hero__line--first { margin-top: 30px; position: relative; z-index: 2; }
.about-hero__row { position: relative; display: flex; margin-top: -20px; min-height: calc(var(--about-size) * 1.76); } /* room for the absolutely placed second line */
.about-hero__line--second { color: var(--inetz-orange); position: absolute; top: 0; right: 0; width: 100%; margin-top: 0; text-align: right; z-index: 2; pointer-events: none; }
/* The big outlined year and its caption close the hero, under the copy (not inside the headline, which stays in one piece). */
.about-hero__year { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; margin-top: 70px; padding-top: 2.25rem; border-top: 1px solid rgba(255, 255, 255, .14); user-select: none; }
.about-hero__year-num {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(4rem, 9vw, 9rem); line-height: .8; letter-spacing: -.02em;
    color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .55);
}
.about-hero__year-label { font-family: var(--font-label); font-weight: 700; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inetz-orange); }
.about-hero__copy { margin-top: 100px; }
.about-hero__text { max-width: 445px; color: #cfcfcf; font-size: 1.5rem; }
/* "Our commitment": a lighter band (#1f1f1f) between the two black ones, so it stands apart. */
.statement .display-title { margin-top: 30px; padding-right: 1.5rem; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; }
.statement__accent { color: var(--inetz-orange); }
.statement__text { margin: 30px 0 0; padding-left: 1.5rem; border-left: 3px solid var(--inetz-orange); max-width: 460px; font-family: var(--font-label); font-size: 1.5rem; line-height: 1.5; color: #cfcfcf; }
.about-hero__text--ubuntu { font-family: var(--font-label); }
.about-hero__text p { margin: 0; }

.team__grid { margin-top: 100px; padding: 0; }
.team__member { padding: 10px; }
.team__member img { display: block; width: 100%; height: auto; }
.team__name { margin: 20px 0 0; font-family: 'Roboto', sans-serif; font-size: 1.5rem; text-transform: uppercase; color: #fff; }
.team__role { margin: 0; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.4rem; color: #fff; }

/* ---------- Services and Careers: list on the left, content block on the right ---------- */

.svc-panel__lead { margin-top: 1.25rem; }
.svc-panel__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.svc-panel__cols > div > :first-child { margin-top: 0; }
.svc-panel__lists { display: flex; flex-wrap: wrap; column-gap: 2rem; }
.svc-panel__lists ul { flex: 1 1 220px; }
.svc-panel__image { display: block; margin: 1rem 0; }
.svc-panel__subhead--check::before { content: "\2713\00a0"; }
.svc-panel__subhead { font-family: var(--font-label); font-size: 1.4rem; font-weight: 700; color: #fff; margin: 1.25rem 0 .5rem; }

/* ---------- Services: list on the left, content block on the right ---------- */

/* One panel is shown at a time (site.js hides the others). Without JavaScript every panel is
   shown one after another and the list items are plain links to them. */
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; margin-top: 3rem; }
.svc__list { position: sticky; top: calc(var(--header-h) + 28px); display: flex; flex-direction: column; }
.svc__tab {
    display: flex; align-items: baseline;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.3vw, 2.2rem); line-height: 1.1;
    letter-spacing: .5px; text-transform: uppercase;
    color: #6e6e6e; text-decoration: none;
    transition: color .25s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
}
/* The orange bar grows in front of the selected item and pushes it to the right. */
.svc__tab::before {
    content: ''; align-self: center; flex: 0 0 auto;
    width: 0; height: 3px; margin-right: 0;
    background: var(--inetz-orange);
    transition: width .3s cubic-bezier(.4, 0, .2, 1), margin-right .3s cubic-bezier(.4, 0, .2, 1);
}
.svc__tab-num { font-family: var(--font-label); font-weight: 400; font-size: 14px; letter-spacing: 0; margin-right: 16px; vertical-align: .35em; }
.svc__tab:hover, .svc__tab:focus-visible { color: #fff; transform: translateX(10px); }
.svc__tab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.svc__tab[aria-selected="true"] { color: var(--inetz-orange); transform: none; }
.svc__tab[aria-selected="true"]::before { width: 28px; margin-right: 14px; }

.svc-panel {
    padding: clamp(1.5rem, 3vw, 3rem);
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 24px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
}
.svc-panel + .svc-panel { margin-top: 1.5rem; }
.svc-panel:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.svc-panel__num { margin: 0 0 .5rem; font-family: var(--font-label); font-weight: 700; font-size: 1rem; letter-spacing: .1em; color: var(--inetz-orange); }
.svc-panel__title { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.05; text-transform: uppercase; color: #fff; }
.svc-panel__body { font-family: var(--font-label); font-size: 1.15rem; line-height: 1.6; }
.svc-panel__body p { margin: 0 0 1rem; }
.svc-panel__body ul { padding-left: 1.4rem; margin: 0 0 1rem; }
.svc-panel__body > :last-child { margin-bottom: 0; }
.svc-panel__body .svc-panel__image { max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: 14px; }

/* Guide text inside a panel (Support): headings, links, numbered steps, code and tables. */
.svc--docs .svc-panel__body > .svc-panel__subhead:first-child { margin-top: 0; }
.svc-panel__subhead--sm { font-size: 1.2rem; }
.svc--docs .svc-panel__body a { color: var(--inetz-orange); text-decoration: underline; overflow-wrap: anywhere; }
.svc--docs .svc-panel__body a:hover, .svc--docs .svc-panel__body a:focus-visible { color: #fff; }
.svc--docs .svc-panel__body ol { padding-left: 1.6rem; margin: 0 0 1rem; }
.svc--docs .svc-panel__body li { margin-bottom: .35rem; }
.svc--docs .svc-panel__body code { padding: .1rem .4rem; border-radius: 4px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .95em; overflow-wrap: anywhere; }
.svc--docs .svc-panel__body pre { margin: 0 0 1rem; padding: 1rem 1.25rem; overflow-x: auto; border-radius: 10px; background: rgba(0, 0, 0, .55); }
.svc--docs .svc-panel__body pre code { padding: 0; background: none; }
.svc--docs .svc-panel__body table { width: 100%; margin: 0 0 1.25rem; border-collapse: collapse; }
.svc--docs .svc-panel__body th, .svc--docs .svc-panel__body td { padding: .55rem .75rem; border: 1px solid rgba(255, 255, 255, .18); text-align: left; vertical-align: top; }
.svc--docs .svc-panel__body th { background: rgba(255, 255, 255, .08); font-weight: 700; }
.svc--docs .svc-panel__body img { max-width: 100%; height: auto; }

/* The new panel drops in from above while it is uncovered from the top down. */
.svc-panel.is-entering { animation: svc-in .6s cubic-bezier(.16, .84, .3, 1) backwards; }
.svc-panel.is-leaving { animation: svc-out .17s ease-in forwards; }
@keyframes svc-in {
    from { opacity: 0; transform: translateY(-36px); clip-path: inset(0 0 100% 0 round 24px); }
    to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 24px); }
}
@keyframes svc-out {
    to { opacity: 0; transform: translateY(14px); }
}

/* ---------- AI (the AI page and the AI band on Home) ---------- */

.ai-hero__title {
    margin: 30px 0 0; max-width: 62rem;
    font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 7vw, 6.5rem); line-height: .95;
    text-transform: uppercase; color: #fff;
}
.ai-hero__title--band { font-size: clamp(2.25rem, 5.5vw, 5rem); }
.ai-hero__accent { color: var(--inetz-orange); }
.ai-hero__lead { max-width: 40rem; margin: 2rem 0 0; font-family: var(--font-label); font-size: 1.5rem; line-height: 1.45; color: #cfcfcf; }
.ai-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 2.5rem; }
.ai-hero__link { font-family: var(--font-label); font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.ai-hero__link:hover, .ai-hero__link:focus-visible { color: var(--inetz-orange); }
/* A hero with a photo: text left and photo right on desktop, the photo under the text on a phone */
.ai-hero__figure { margin: 2.5rem 0 0; }
.ai-hero__figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1.25rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 50px rgba(0, 0, 0, .55); filter: brightness(.92) saturate(.95); }
@media (min-width: 992px) {
    .ai-hero--image .ai-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; }
    .ai-hero--image .ai-hero__figure { margin: 0; }
    .ai-hero--image .ai-hero__title, .ai-hero--image .ai-hero__title--band { font-size: clamp(2.25rem, 4.2vw, 4rem); }
    .ai-hero--image .ai-hero__lead { font-size: 1.3rem; }
}
.ai-details .display-title { margin-top: 30px; }

.ai-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin: 3.5rem 0 0; padding: 0; list-style: none; }
.ai-pillar { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.ai-pillar .icon { width: 36px; height: 36px; color: var(--inetz-orange); stroke-width: 1.75; }
.ai-pillar__title { margin: 1rem 0 .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; color: #fff; }
.ai-pillar__text { margin: 0; font-family: var(--font-label); font-size: 1.15rem; line-height: 1.5; color: #cfcfcf; }

.home-custom .display-title { margin-top: 30px; }
.home-custom__intro { max-width: 46rem; margin: 2rem 0 0; font-family: var(--font-label); font-size: 1.4rem; line-height: 1.5; color: #cfcfcf; }
.qualities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.quality { padding-top: 1.25rem; border-top: 3px solid var(--inetz-orange); }
.quality__title { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; text-transform: uppercase; color: #fff; }
.quality__text { margin: 0; font-family: var(--font-label); font-size: 1.05rem; line-height: 1.5; color: #cfcfcf; }
.quality__link { margin: .9rem 0 0; font-family: var(--font-label); font-weight: 700; font-size: .95rem; }
.quality__link a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.quality__link a:hover, .quality__link a:focus-visible { text-decoration-color: var(--inetz-orange); }

/* Home bands on a light and a blue background. The accent is an orange underline instead of orange
   text, because the brand orange does not have enough contrast on light or blue backgrounds. */
/* A dotted globe with arcs between cities (public/assets/img/network-globe.svg, made by resources/art/network-globe.py)
   sits behind the right side of the band, where the headline does not reach. Decorative only. */
.home-ai {
    background-image: url('/assets/img/network-globe.svg');
    background-repeat: no-repeat;
    background-size: clamp(340px, 32vw, 600px) auto;
    background-position: right 3% top 24px;
}
.home-ai .ai-hero__title { max-width: 11.5em; } /* keeps the headline clear of the globe at any width */
.band--light .ai-hero__title { color: #000; }
.band--light .ai-hero__accent, .home-custom .statement__accent {
    text-decoration: underline; text-decoration-color: var(--inetz-orange); text-decoration-thickness: .07em;
    text-underline-offset: .14em; text-decoration-skip-ink: none;
}
.band--light .ai-hero__accent { color: #000; }
.band--light .ai-hero__lead { color: #404040; }
.band--light .ai-pillar { border-top-color: rgba(0, 0, 0, .2); }
.band--light .ai-pillar .icon { color: var(--inetz-orange-deep); }
.band--light .ai-pillar__title { color: #000; }
.band--light .ai-pillar__text { color: #404040; }
.home-custom .display-title.display-title--light { color: rgba(255, 255, 255, .78); }
.home-custom .statement__accent { color: #fff; }
.band--blue .home-custom__intro, .band--blue .quality__text { color: #eef2f7; }

/* ---------- AI page: the build cycle, the gates, the coverage map and the ground rules ----------
   Data comes from config/site.php (ai_process, ai_gates, ai_coverage, ai_rules). No scripts: the stage links are plain anchors.
   Bands alternate light, black, light, blue so no two neighbors match (see docs/design-system.md). On light and blue bands the
   brand orange is only used for rules, buttons and graphics, and text uses orange-deep or black. */

.ai-process__title { margin-top: 30px; max-width: 62rem; }
.ai-process__accent { text-decoration: underline; text-decoration-color: var(--inetz-orange); text-decoration-thickness: .07em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.ai-process__lead, .ai-gates__lead { max-width: 46rem; margin: 2rem 0 0; font-family: var(--font-label); font-size: 1.4rem; line-height: 1.5; color: #404040; }
.ai-gates__lead { color: #cfcfcf; }
.ai-coverage__title { margin-top: 30px; max-width: 54rem; }
.ai-gates .display-title, .ai-rules .display-title { margin-top: 30px; max-width: 54rem; }

/* The track: seven numbered stops joined by a line, and a return line underneath that says the cycle repeats. */
.ai-track { margin-top: 3.5rem; }
.ai-track__list { position: relative; display: grid; grid-template-columns: repeat(var(--steps, 7), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ai-track__list::before { content: ""; position: absolute; top: 22px; left: calc(100% / (var(--steps, 7) * 2)); right: calc(100% / (var(--steps, 7) * 2)); height: 2px; background: rgba(0, 0, 0, .22); }
.ai-track__link { position: relative; display: flex; flex-direction: column; align-items: center; gap: .65rem; color: #000; text-decoration: none; }
.ai-track__num {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: #000; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    transition: background-color .2s, color .2s;
}
.ai-track__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; text-align: center; }
.ai-track__link:hover .ai-track__num, .ai-track__link:focus-visible .ai-track__num { background: var(--inetz-orange); color: #000; }
.ai-track__link:focus-visible { outline: 2px solid #000; outline-offset: 6px; border-radius: 8px; }
.ai-track__loop {
    position: relative; height: 40px; margin: 1.1rem calc(100% / (var(--steps, 7) * 2)) 0;
    border: 2px solid var(--inetz-orange-deep); border-top: 0; border-radius: 0 0 20px 20px;
}
.ai-track__loop::before { content: ""; position: absolute; left: -7px; top: -9px; border: 6px solid transparent; border-top: 0; border-bottom: 9px solid var(--inetz-orange-deep); }
.ai-track__loop-text {
    position: absolute; left: 50%; bottom: -.85em; transform: translateX(-50%); padding: 0 .9rem; white-space: nowrap;
    background: var(--inetz-light); font-family: var(--font-label); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: #404040;
}

/* One row per stage: what the stage is, what AI does there (white card) and what a person decides (black card). */
.ai-stages { margin: 3.5rem 0 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(0, 0, 0, .2); }
.ai-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: 1.5rem 2rem; align-items: start; padding: 2.25rem 0; border-top: 1px solid rgba(0, 0, 0, .2); }
.ai-stage__num { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .12em; color: var(--inetz-orange-deep); }
.ai-stage__title { margin: .35rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; text-transform: uppercase; color: #000; }
.ai-stage__summary { margin: .9rem 0 0; font-family: var(--font-label); font-size: 1.2rem; line-height: 1.4; color: #404040; }
.ai-stage__who { padding: 1.25rem 1.5rem 1.4rem; border-radius: 18px; }
.ai-stage__who p { margin: 0; font-size: 1rem; line-height: 1.55; }
.ai-stage__who--ai { background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-top: 3px solid var(--inetz-orange); color: #303030; }
.ai-stage__who--people { background: #000; color: #e6e6e6; }
.ai-stage__who .ai-stage__label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-family: var(--font-label); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.ai-stage__who--ai .ai-stage__label { color: var(--inetz-orange-deep); }
.ai-stage__who--people .ai-stage__label { color: #fff; }
.ai-stage__label .icon { width: 18px; height: 18px; }
.ai-stages__loop { display: none; margin: 1.5rem 0 0; font-family: var(--font-label); font-weight: 700; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: #404040; }

/* The gates: seven steps in a row (a column on tablets and phones), colored by who or what does the check. */
.ai-gates__rail { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 .5rem; margin: 3.5rem 0 0; padding: 0; list-style: none; }
.ai-gates__rail::before { content: ""; position: absolute; top: 22px; left: calc(100% / 14); right: calc(100% / 14); height: 2px; background: rgba(255, 255, 255, .28); }
.ai-gate { position: relative; text-align: center; }
.ai-gate__num { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; border: 2px solid #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.ai-gate--ai .ai-gate__num { background: var(--inetz-orange); border-color: var(--inetz-orange); color: #000; }
.ai-gate--auto .ai-gate__num { background: #000; color: #fff; }
.ai-gate--person .ai-gate__num { background: #fff; color: #000; }
.ai-gate__title { margin: .9rem 0 .4rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; color: #fff; }
.ai-gate__text { margin: 0; padding: 0 .35rem; font-family: var(--font-label); font-size: .95rem; line-height: 1.4; color: #cfcfcf; }

.ai-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 2.5rem 0 0; padding: 0; list-style: none; font-family: var(--font-label); font-size: .95rem; color: #cfcfcf; }
.ai-legend li { display: flex; align-items: center; gap: .55rem; }
.ai-legend--light { color: #404040; }
.ai-legend__swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.ai-legend__swatch--ai { background: var(--inetz-orange); border-color: var(--inetz-orange); }
.ai-legend__swatch--auto { background: #000; }
.ai-legend__swatch--person { background: #fff; }

/* The coverage map: concerns down the side, stages across the top, a dot where a concern is checked. */
/* Scrolls sideways on phones only. position and overflow-y keep the screen reader text in the cells from adding a vertical scrollbar. */
.ai-map-wrap { position: relative; margin-top: 2.5rem; overflow-x: auto; overflow-y: hidden; }
.ai-map { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.ai-map thead th { padding: 0 .25rem .85rem; border-bottom: 2px solid #000; font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; text-align: center; color: #000; vertical-align: bottom; }
.ai-map__stage { display: block; }
.ai-map__stage-num { display: block; margin-bottom: .3rem; font-size: .8rem; letter-spacing: .12em; color: var(--inetz-orange-deep); }
.ai-map tbody th { width: 25%; padding: 1rem 1rem 1rem 0; border-top: 1px solid rgba(0, 0, 0, .14); font-family: var(--font-label); font-weight: 700; font-size: 1.05rem; text-align: left; color: #000; }
.ai-map tbody td { padding: 1rem .25rem; border-top: 1px solid rgba(0, 0, 0, .14); text-align: center; }
.ai-map tbody tr:last-child th, .ai-map tbody tr:last-child td { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.ai-map tbody tr:hover th, .ai-map tbody tr:hover td { background: rgba(0, 0, 0, .035); }
.ai-dot { display: inline-block; vertical-align: middle; border-radius: 50%; }
.ai-dot--2 { width: 24px; height: 24px; background: var(--inetz-orange-deep); }
.ai-dot--1 { width: 16px; height: 16px; border: 2px solid var(--inetz-orange-deep); }
.ai-dot--0 { width: 6px; height: 6px; background: rgba(0, 0, 0, .16); }

.ai-rules__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.ai-rules__note { max-width: 52rem; margin: 3rem 0 0; font-family: var(--font-label); font-size: 1.15rem; line-height: 1.55; color: #eef2f7; }

@media (max-width: 991.98px) {
    .ai-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-stage__head { grid-column: 1 / -1; }
    .ai-gates__rail { grid-template-columns: 1fr; gap: 1.75rem 0; }
    .ai-gates__rail::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
    .ai-gate { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1.1rem; text-align: left; }
    .ai-gate__num { grid-row: 1 / span 2; margin: 0; }
    .ai-gate__title { margin: .2rem 0 .3rem; }
    .ai-gate__text { padding: 0; }
    .ai-rules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .ai-track { display: none; }
    .ai-stages { margin-top: 2.5rem; }
    .ai-stages__loop { display: block; }
    .ai-stage__title { font-size: 2.2rem; }
    .ai-process__lead, .ai-gates__lead { font-size: 1.2rem; }
}

@media (max-width: 575.98px) {
    .legacy-migration__grid { grid-template-columns: 1fr; }
    .sp-cards, .sp-cards--4 { grid-template-columns: 1fr; }
    .ai-stage { grid-template-columns: 1fr; }
    .ai-rules__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-track__num { transition: none; }
}

/* ---------- Web application development page ----------
   Reuses the AI page's hero, track and stage styles (--steps sets how many stops the track has). The rest is below.
   Tones alternate black, light, black, light, blue, black. See docs/web-applications.md. */

.web-proof .display-title, .web-built .display-title, .web-stack .display-title { margin-top: 30px; max-width: 54rem; }
.web-cases__title { margin-top: 30px; max-width: 54rem; }

.web-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 3.5rem 0 0; padding: 0; list-style: none; }
.web-stat { padding-top: 1.5rem; border-top: 3px solid var(--inetz-orange); }
.web-stats--single { grid-template-columns: minmax(0, 40rem); }
.web-stat__figure { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1; text-transform: uppercase; color: #fff; }
.web-stat__text { margin: 1rem 0 0; max-width: 26rem; font-family: var(--font-label); font-size: 1.15rem; line-height: 1.5; color: #cfcfcf; }

/* The three example cards on the light band: a before and after, a chain of steps, or an icon (the .ai-pillar look). */
.web-shift { display: flex; align-items: baseline; gap: .9rem; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: 1; text-transform: uppercase; color: #000; }
.web-shift__from { color: #6b6b6b; text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--inetz-orange); }
.web-shift__arrow { color: var(--inetz-orange-deep); }
.web-chain { display: flex; flex-wrap: wrap; gap: .5rem .35rem; margin: 0; padding: 0; list-style: none; }
.web-chain li { display: flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border: 2px solid #000; border-radius: 999px; font-family: var(--font-label); font-weight: 700; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: #000; }
.web-chain li:not(:last-child)::after { content: "\203A"; margin-left: .35rem; color: var(--inetz-orange-deep); font-size: 1.1rem; line-height: 1; }
.web-cases__list .ai-pillar { display: flex; flex-direction: column; }
.web-cases__list .web-shift, .web-cases__list .web-chain, .web-cases__list .icon { min-height: 5.6rem; align-content: flex-start; align-items: flex-start; } /* so the three titles line up */
.web-cases__list .icon { height: auto; }
.web-cases__list .ai-pillar__title { margin-top: 1.25rem; }
.web-cases__link { margin: 3rem 0 0; }
.web-cases__anchor { color: #000; }

.web-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.web-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem; }
.web-kind { padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .4); }
.web-kind__title { margin: 0 0 1rem; font-family: var(--font-label); font-weight: 700; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.web-kind ul { margin: 0; padding: 0; list-style: none; }
.web-kind li { position: relative; padding: .35rem 0 .35rem 1.25rem; font-family: var(--font-label); font-size: 1.1rem; line-height: 1.4; color: #eef2f7; }
.web-kind li::before { content: ""; position: absolute; left: 0; top: .95em; width: 7px; height: 7px; border-radius: 50%; background: var(--inetz-orange); }

.web-stack__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; margin-top: 3rem; }
.web-stack__heading { margin: 0 0 .9rem; font-family: var(--font-label); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a; }
.web-stack__quip { grid-column: 2; align-self: end; margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--inetz-orange); max-width: 30rem; font-family: var(--font-label); font-weight: 700; font-size: 1.4rem; line-height: 1.35; color: var(--inetz-orange); }
.web-stack__pills { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.web-pill { padding: .4rem 1rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font-family: var(--font-label); font-size: 1.05rem; line-height: 1.3; color: #fff; }
.svc-panel__groups { display: grid; gap: 1.5rem; margin: 1rem 0 1.5rem; }
.svc-panel__groups .web-stack__heading { margin-bottom: .65rem; }
.svc-panel__groups .web-stack__pills { margin: 0; padding: 0; list-style: none; }
.svc-panel__groups .web-pill { padding: .3rem .85rem; font-size: .95rem; }
.web-pill--joke { background: transparent; font: inherit; border-style: dashed; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.web-pill--joke:hover, .web-pill--joke:focus-visible { border-color: var(--inetz-orange); color: var(--inetz-orange); }
.web-pill--joke:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The BBj modal: same dark look as the cookie preferences window. */
.fun-modal {
    --bs-modal-width: 600px; --bs-modal-bg: #0c0c0c; --bs-modal-color: #fff;
    --bs-modal-border-color: rgba(255, 255, 255, .16); --bs-modal-border-radius: 24px; --bs-modal-inner-border-radius: 23px;
    --bs-modal-header-border-color: rgba(255, 255, 255, .12); --bs-modal-footer-border-color: rgba(255, 255, 255, .12);
    --bs-modal-box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.fun-modal .modal-content { font-family: var(--font-label); }
.fun-modal .modal-header { align-items: flex-start; padding: 1.6rem 1.75rem 1.1rem; border-bottom: 0; }
.fun-modal .modal-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1; text-transform: uppercase; color: #fff; }
.fun-modal .btn-close { margin: .2rem 0 0 1rem; filter: invert(1) grayscale(1); opacity: .7; }
.fun-modal .btn-close:hover, .fun-modal .btn-close:focus-visible { opacity: 1; }
.fun-modal .modal-body { padding: 0 1.75rem 1rem; font-size: 1rem; line-height: 1.6; color: #d7d7d7; }
.fun-modal .modal-body > p { margin: 0 0 .9rem; }
.fun-modal__lead { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: var(--inetz-orange) !important; }
.fun-modal .modal-body strong { color: #fff; }
.fun-modal .modal-body ul { margin: 0 0 .9rem; padding-left: 1.25rem; }
.fun-modal__note { font-size: .8rem; line-height: 1.5; color: #8a8a8a; }
.fun-modal__note a { color: #c4c4c4; text-decoration: underline; }
.fun-modal .modal-footer { justify-content: flex-start; padding: 1.1rem 1.75rem 1.5rem; }
.legacy-bbj .display-title, .legacy-faq__title { margin-top: 30px; max-width: 54rem; }
.sp-band .display-title.sp-title { margin-top: 30px; max-width: 54rem; }
.web-ecommerce__cta { margin: 2rem 0 0; }
.sp-intro { max-width: 48rem; margin: 2rem 0 0; font-family: var(--font-label); font-size: 1.3rem; line-height: 1.5; color: #404040; }
.band--blue .sp-intro { color: #eef2f7; }
.band--black .sp-intro { color: #cfcfcf; }
.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.sp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-flow { margin-top: 2.5rem; }
.sp-link { margin: 2rem 0 0; }
.sp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-label); font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.sp-breadcrumb li + li::before { content: "/"; margin-right: .6rem; color: #8a8a8a; }
.sp-breadcrumb a { color: #cfcfcf; text-decoration: none; }
.sp-breadcrumb a:hover, .sp-breadcrumb a:focus-visible { color: var(--inetz-orange); }
.sp-breadcrumb [aria-current="page"] { color: var(--inetz-orange); }
.legacy-integration__title { margin-top: 30px; max-width: 54rem; }
.legacy-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 0; margin: 3rem 0 0; padding: 0; list-style: none; }
.legacy-flow__part { padding: 1rem 1.5rem; border: 2px solid #000; border-radius: 14px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; color: #000; }
.legacy-flow__part--connector { border-color: var(--inetz-orange); background: var(--inetz-orange); }
.legacy-flow__arrow { padding: 0 1rem; color: var(--inetz-orange-deep); font-size: 1.9rem; line-height: 1; }
.legacy-integration__list { margin-top: 3rem; }
.legacy-integration__example { max-width: 52rem; margin: 3rem 0 0; padding-left: 1.25rem; border-left: 3px solid var(--inetz-orange); font-family: var(--font-label); font-size: 1.2rem; line-height: 1.5; color: #000; }
.legacy-migration .display-title { margin-top: 30px; max-width: 54rem; }
.legacy-migration__lead { max-width: 48rem; margin: 2rem 0 0; font-family: var(--font-label); font-size: 1.3rem; line-height: 1.5; color: #eef2f7; }
.legacy-migration__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.legacy-bbj__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3.5rem; margin-top: 3rem; }
.legacy-bbj__heading { margin: 0 0 .9rem; font-family: var(--font-label); font-weight: 700; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inetz-orange); }
.legacy-bbj__cols p { margin: 0 0 1rem; font-family: var(--font-label); font-size: 1.1rem; line-height: 1.55; color: #d7d7d7; }
.legacy-bbj__list { margin: 0; padding-left: 1.25rem; font-family: var(--font-label); font-size: 1.1rem; line-height: 1.55; color: #d7d7d7; }
.legacy-bbj__list li { margin-bottom: .6rem; }
.legacy-bbj--compact { padding-block: 55px; }
.legacy-bbj__compact { display: flex; align-items: center; justify-content: space-between; gap: 2rem 3rem; }
.legacy-bbj__compact .display-title { margin-top: 12px; max-width: 40rem; }
.legacy-bbj__lead { margin: 1rem 0 0; max-width: 46rem; font-family: var(--font-label); font-size: 1.15rem; line-height: 1.5; color: #d7d7d7; }
.legacy-bbj__compact .btn-inetz { flex: 0 0 auto; }
.legacy-bbj__note { margin: 2.5rem 0 0; max-width: 46rem; font-size: .8rem; line-height: 1.5; color: #8a8a8a; }
.legacy-bbj__note a { color: #c4c4c4; text-decoration: underline; }
.legacy-faq__list { margin: 3rem 0 0; border-bottom: 1px solid rgba(0, 0, 0, .2); }
.legacy-faq__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 4rem; padding: 1.5rem 0; border-top: 1px solid rgba(0, 0, 0, .2); }
.legacy-faq__item dt { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: #000; }
.legacy-faq__item dd { margin: 0; font-family: var(--font-label); font-size: 1.1rem; line-height: 1.55; color: #404040; }
.web-pill--primary { border-color: var(--inetz-orange); background: var(--inetz-orange); font-weight: 700; color: #000; }

@media (max-width: 991.98px) {
    .web-stats, .web-principles, .web-kinds { grid-template-columns: 1fr; }
    .legacy-bbj__cols, .legacy-faq__item { grid-template-columns: 1fr; }
    .legacy-bbj__compact { flex-direction: column; align-items: flex-start; }
    .legacy-migration__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-cards, .sp-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .web-stack__groups { grid-template-columns: 1fr; }
    .web-stack__quip { grid-column: 1; }
}

.svc-panel__foryou { margin: 1.75rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.svc-panel__foryou-label { display: block; margin-bottom: .3rem; font-family: var(--font-label); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inetz-orange); }
.svc-panel__foryou a { display: inline-block; margin-left: .35rem; color: var(--inetz-orange); text-decoration: underline; text-underline-offset: 4px; }
.svc-panel__foryou a:hover, .svc-panel__foryou a:focus-visible { color: #fff; }
.svc-panel__logo { display: block; width: 300px; max-width: 70%; height: auto; margin: -.5rem 0 .75rem -1.1rem; } /* the file has transparent padding, so it is pulled in to line up with the text */
.svc-panel__pills { margin: 0 0 1.25rem; padding: 0; }
.svc-panel__more { margin: 1.75rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.svc-panel__more a { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.15rem; border: 1.5px solid var(--inetz-orange); border-radius: 999px; background: rgba(255, 81, 2, .08); font-family: var(--font-label); font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--inetz-orange); text-decoration: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.svc-panel__arrow { display: inline-block; transition: transform .2s ease; }
.svc-panel__more a:hover, .svc-panel__more a:focus-visible { background: var(--inetz-orange); color: #000; box-shadow: 0 0 0 4px rgba(255, 81, 2, .18); }
.svc-panel__more a:hover .svc-panel__arrow, .svc-panel__more a:focus-visible .svc-panel__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
    .svc-panel__more a, .svc-panel__arrow { transition: none; }
    .svc-panel__more a:hover .svc-panel__arrow, .svc-panel__more a:focus-visible .svc-panel__arrow { transform: none; }
}
.svc-panel__phone { margin: 1rem 0 0; }
.svc-panel__phone a { color: var(--inetz-orange); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.svc-panel__phone a:hover, .svc-panel__phone a:focus-visible { color: #fff; }
.svc-panel__note { margin: 1.5rem 0 0; font-size: .85rem; line-height: 1.5; color: #8a8a8a; }
.svc-panel__callout { margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.15; text-transform: uppercase; color: var(--inetz-orange); }

.careers-list { padding-top: 20px; }
.careers-list .svc { margin-top: 1.5rem; }
.not-found__text { color: #fff; font-size: 1.25rem; margin: 1.5rem 0 2rem; max-width: 36rem; }
.work-with-us .display-title { margin-top: 0; }
.work-with-us__actions { display: flex; flex-wrap: wrap; gap: 3rem; margin-top: 6rem; }
.work-with-us__item { padding: 0 8px; }
.work-with-us__item p { font-family: var(--font-label); font-size: 1.5rem; color: #000; margin: 0 0 .75rem; }

/* ---------- Forms ---------- */

.contact__intro { font-size: 30px; line-height: 1.4; max-width: 800px; margin: 1.5rem 0 0; color: #fff; }
/* Title and intro on the left, the headquarters card on the right (stacked on tablet and phone). */
.contact__top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3rem; align-items: start; }
.contact__hq { margin-top: 30px; padding: clamp(1.25rem, 2.2vw, 2rem); border: 1px solid rgba(255, 255, 255, .14); border-radius: 24px; background: rgba(255, 255, 255, .04); color: #fff; }
.contact__hq-title { margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.contact__hq-list { margin: 0; padding: 0; list-style: none; font-family: var(--font-label); font-size: 1.15rem; line-height: 1.5; }
.contact__hq-list li { display: flex; align-items: flex-start; gap: 14px; }
.contact__hq-list li + li { margin-top: 1rem; }
.contact__hq-list .icon { width: 20px; height: 20px; margin-top: .2em; color: var(--inetz-orange); }
.contact__hq-list a { color: #fff; text-decoration: none; }
.contact__hq-list a:hover, .contact__hq-list a:focus-visible { color: var(--inetz-orange); }
.inquiry-wrap { margin-top: 100px; }
.inquiry-form { width: 100%; }
.careers-apply { padding-top: 40px; }
.careers-apply__intro { max-width: 520px; margin: 0 0 3rem; color: #fff; }
.careers-apply .inquiry-wrap { margin-top: 0; }

/* Two columns on desktop, one on phones. Each column stacks its fields. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.form-grid__col { min-width: 0; }

.field { position: relative; margin: 0 0 .5rem; padding-top: .9rem; }
.field__input {
    display: block; width: 100%;
    background: transparent; border: 0; border-bottom: 1px solid #fff; border-radius: 0;
    color: #fff; font-family: var(--font-label); font-size: 1.5rem; line-height: 1.3;
    padding: .4rem 0; outline: 0; resize: none; overflow: hidden;
}
.field__input:focus { border-bottom-color: var(--inetz-orange); }
.field__label {
    position: absolute; left: 0; top: 1.45rem;
    font-family: var(--font-label); font-weight: 500; font-size: 1.5rem; line-height: 1.3;
    text-transform: uppercase; color: #8a8a8a; pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label { top: -.15rem; font-size: .85rem; color: #b5b5b5; }
.field--file { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding-top: 1.1rem; }
.field--file .field__error { flex: 0 0 100%; margin-top: 0; }
.field__file-label {
    display: block; font-family: var(--font-label); font-weight: 500; font-size: 1.15rem;
    text-transform: uppercase; color: #8a8a8a; margin: 0;
}
.field__file { color: #fff; font-family: var(--font-label); max-width: 100%; }
.field__file::file-selector-button {
    background: transparent; color: #fff; border: 1px solid #fff; padding: .3rem .8rem; margin-right: .8rem;
    font-family: var(--font-label); cursor: pointer;
}
/* A field's error line takes no space until there is an error, then opens up smoothly.
   (Bootstrap's reset sets [hidden] to display:none !important, so the hidden state is built from
   max-height and opacity here, and the element stays display:block.) */
.field__error {
    display: block !important;
    margin: .35rem 0 0; font-size: .9rem; line-height: 1.4; color: #ff8a65;
    max-height: 4em; opacity: 1; overflow: hidden;
    transition: max-height .2s ease, opacity .2s ease, margin .2s ease, visibility 0s;
}
.field__error[hidden] {
    max-height: 0; opacity: 0; margin-top: 0; visibility: hidden;
    transition: max-height .2s ease, opacity .2s ease, margin .2s ease, visibility 0s .2s;
}
.field--invalid .field__input { border-bottom-color: #ff8a65; }
.field--invalid .field__label,
.field--invalid .field__file-label { color: #ff8a65; }
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inquiry-form .btn-inetz { margin-top: 1.25rem; }
.btn-inetz--form { min-width: 10.5rem; } /* wide enough for "Sending..." plus the spinner, so the button does not resize */

/* Loading state for every button that waits on the server (set by InetzUI.setButtonLoading in
   site.js). Pure CSS spinner in front of the label, and the button ignores clicks while busy.
   The same treatment is used on every submit button. See docs/design-system.md. */
.btn-inetz.is-loading { opacity: .85; cursor: progress; pointer-events: none; }
.btn-inetz.is-loading::before {
    content: '';
    display: inline-block;
    width: 1em; height: 1em;
    margin-right: .6em;
    vertical-align: -.15em;
    border: .16em solid rgba(0, 0, 0, .25);
    border-top-color: #000;
    border-radius: 50%;
    animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    /* A spinner needs some motion to mean "working", so slow it down instead of removing it. */
    .btn-inetz.is-loading::before { animation-duration: 1.8s; }
}

/* The status area above the button takes no space when empty. A notice opens up when it appears. */
.form-notice {
    margin: 1.25rem 0 0; padding: .85rem 1rem; font-family: var(--font-label);
    animation: form-notice-in .25s ease both;
}
@keyframes form-notice-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.form-notice--success { background: #12361c; border: 1px solid #2e8b4f; color: #d7f5df; }
.form-notice--error { background: #3b1410; border: 1px solid #ff8a65; color: #ffd9cf; }

/* Confirmation that replaces the form after a successful submit. Compact on purpose: it is
   scrolled into view, so it does not need to keep the form's height. */
.inquiry-wrap { position: relative; scroll-margin-top: 1.5rem; }
.form-success {
    scroll-margin-top: 1.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .75rem;
    padding: 2rem 1.5rem;
    background: #0f2f1a; border: 1px solid #2e8b4f; border-radius: 10px; color: #d7f5df;
    animation: form-success-in .4s ease both;
}
.form-success:focus { outline: 0; }
.form-success__icon { color: #4ade80; }
.form-success__ring { stroke-dasharray: 252; stroke-dashoffset: 252; animation: form-success-draw .6s ease-out .1s forwards; }
.form-success__check { stroke-dasharray: 60; stroke-dashoffset: 60; animation: form-success-draw .4s ease-out .55s forwards; }
.form-success__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; text-transform: uppercase; color: #fff; }
.form-success__text { margin: 0; max-width: 34rem; font-size: 1.25rem; color: #d7f5df; }
.form-success__again {
    margin-top: .5rem; background: transparent; color: #d7f5df; cursor: pointer;
    border: 1px solid #4ade80; border-radius: 5px; padding: .55rem 1.1rem;
    font-family: var(--font-label); font-weight: 500; font-size: 1rem; text-transform: uppercase;
}
.form-success__again:hover, .form-success__again:focus-visible { background: #4ade80; color: #0f2f1a; }
@keyframes form-success-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes form-success-draw { to { stroke-dashoffset: 0; } }

/* ---------- Text pages (policies and support) ---------- */

.page-text { background: #000; color: #fff; padding: 20px 0 75px; }
.page-text__title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 36px; line-height: 1.2; color: #d7d7d7; margin: 0 0 .75rem; }
.page-text__body h2, .page-text__body h3, .page-text__body h4 { font-family: 'Roboto', sans-serif; font-weight: 700; color: #fff; line-height: 1.25; margin: 1.5rem 0 .6rem; }
.page-text__body h2 { font-size: 24px; } /* the sections of the policy pages: h2 under the page's h1, sized like the h3 they replaced */
.page-text__body h3 { font-size: 24px; }
.page-text__body p, .page-text__body li { color: #fff; }
.page-text__body a { color: var(--inetz-orange); text-decoration: underline; overflow-wrap: anywhere; }
.page-text__body a:hover { color: #fff; }
.page-text__body ul, .page-text__body ol { padding-left: 2rem; }
.page-text__body code { color: #fff; background: rgba(255, 255, 255, .12); padding: .1rem .35rem; border-radius: 3px; }
.page-text__body pre { background: #1f1f1f; color: #fff; padding: 1rem; overflow-x: auto; }
.page-text__body pre code { background: none; padding: 0; }
.page-text__body img { margin: 1rem 0; }
.page-text__body table { color: #fff; border-collapse: collapse; margin: 1rem 0; max-width: 100%; display: block; overflow-x: auto; }
.page-text__body th, .page-text__body td { border: 1px solid #555; padding: .4rem .7rem; }
.support-index .page-text__title { font-size: 28px; }
.support-index__groups h2 { font-size: 22px; margin-top: 1.25rem; }
.support-index__groups p { margin: 0 0 1.25rem; }

/* ---------- Cookie consent ---------- */

/* Dark panels that match the rest of the site: near black, a thin light border, large corners, orange for the main action.
   The behavior is in site.js and the markup in partials/cookie-consent.blade.php (both unchanged by the look). */

.cookie-notice {
    position: fixed; z-index: 1060; left: 24px; bottom: 24px; width: 440px; max-width: calc(100vw - 32px);
    padding: 22px 24px 24px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px;
    background: rgba(12, 12, 12, .96); color: #fff;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .6);
    font-family: var(--font-label); font-size: 15px; line-height: 1.55;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice__title, .cookie-modal__eyebrow {
    display: flex; align-items: center; gap: 8px; margin: 0 0 .5rem;
    font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--inetz-orange);
}
.cookie-notice__title .icon, .cookie-modal__eyebrow .icon { width: 17px; height: 17px; }
.cookie-notice__text { margin: 0; color: #e6e6e6; }
.cookie-notice__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.cookie-btn {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    flex: 1 1 auto; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 5px; background: transparent; color: #fff; cursor: pointer;
    font-family: var(--font-label); font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.cookie-btn:hover, .cookie-btn:focus-visible { border-color: var(--inetz-orange); color: var(--inetz-orange); }
.cookie-btn--solid { background: var(--inetz-orange); border-color: var(--inetz-orange); color: #000; }
.cookie-btn--solid:hover, .cookie-btn--solid:focus-visible { background: #e24800; border-color: #e24800; color: #000; }
.cookie-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The preferences window. Bootstrap's modal variables carry the dark colors. */
.cookie-modal {
    --bs-modal-width: 640px; --bs-modal-bg: #0c0c0c; --bs-modal-color: #fff;
    --bs-modal-border-color: rgba(255, 255, 255, .16); --bs-modal-border-radius: 24px; --bs-modal-inner-border-radius: 23px;
    --bs-modal-header-border-color: rgba(255, 255, 255, .12); --bs-modal-footer-border-color: rgba(255, 255, 255, .12);
    --bs-modal-box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .75; }
.cookie-modal .modal-content { font-family: var(--font-label); }
.cookie-modal .modal-header { align-items: flex-start; padding: 1.6rem 1.75rem 1.1rem; border-bottom: 0; }
.cookie-modal .modal-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.05; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.cookie-modal .btn-close { margin: .2rem 0 0 1rem; filter: invert(1) grayscale(1); opacity: .7; }
.cookie-modal .btn-close:hover, .cookie-modal .btn-close:focus-visible { opacity: 1; }
.cookie-modal .modal-body { padding: 0 1.75rem 1.25rem; font-size: 15px; line-height: 1.6; color: #d7d7d7; }
.cookie-modal .modal-body > p { margin: 0 0 .85rem; }
.cookie-modal .modal-footer { flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 1.1rem 1.75rem 1.5rem; }
.cookie-modal .modal-footer .cookie-btn { flex: 1 1 0; margin: 0; }

/* The five categories: plain rows with a thin divider, a white chevron and an orange switch. */
.cookie-categories {
    --bs-accordion-bg: transparent; --bs-accordion-color: #fff; --bs-accordion-border-color: rgba(255, 255, 255, .12); --bs-accordion-border-radius: 0;
    --bs-accordion-btn-color: #fff; --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: #fff;
    --bs-accordion-btn-focus-box-shadow: none;
    margin-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12);
}
.cookie-categories .accordion-item { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cookie-categories .accordion-button { padding: 1rem 0; background: transparent; box-shadow: none; font-family: var(--font-label); font-weight: 700; font-size: 1rem; color: #fff; }
.cookie-categories .accordion-button::after { filter: invert(1); opacity: .75; }
.cookie-categories .accordion-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cookie-categories .accordion-body { padding: 0 0 1.25rem; font-size: 14.5px; line-height: 1.6; color: #d7d7d7; }
.cookie-categories .accordion-body p { margin: 0 0 1rem; }
.cookie-categories__always {
    margin-left: auto; margin-right: .75rem; padding: .15rem .7rem; border: 1px solid var(--inetz-orange); border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--inetz-orange);
}
.cookie-categories .form-switch { display: flex; align-items: center; gap: .75rem; min-height: 0; margin: 0; padding-left: 0; }
.cookie-categories .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    float: none; flex: 0 0 auto; width: 2.75rem; height: 1.5rem; margin: 0; cursor: pointer;
    background-color: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4);
}
.cookie-categories .form-check-input:checked { background-color: var(--inetz-orange); border-color: var(--inetz-orange); }
.cookie-categories .form-check-input:focus { border-color: var(--inetz-orange); box-shadow: 0 0 0 .2rem rgba(255, 81, 2, .35); }
.cookie-categories .form-check-label { color: #fff; font-weight: 600; cursor: pointer; }

/* ---------- Responsive ---------- */

@media (max-width: 1440px) {
    .about-hero__headline { --about-size: 6rem; }
    .about-hero__line--second { margin-top: 46px; }
}

@media (max-width: 991.98px) {
    .ai-pillars { grid-template-columns: 1fr; gap: 1.75rem; }
    .qualities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-hero__lead { font-size: 1.25rem; }
    .section-head__main { flex-basis: 100%; max-width: 100%; }


    .services-teaser__text { font-size: 1.5rem; margin-top: 1em; }

    .site-footer__top { grid-template-columns: 1fr; gap: 2.5rem; }

    .about-hero__line--second { margin-top: 43px; }

    .testimonial { align-items: flex-start; }
    .testimonial__quote, .testimonial--long .testimonial__quote { flex-basis: 100%; max-width: 100%; padding-right: 0; }
    .testimonial__author, .testimonial--long .testimonial__author { flex-basis: 100%; max-width: 100%; padding-left: 0; margin-top: 1.25rem; }

    /* The list becomes a swipeable row of pills that stays under the header while a panel is read. */
    .svc { display: block; margin-top: 2rem; }
    .svc__list {
        top: var(--header-h); z-index: 5;
        flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none;
        margin-inline: -20px; padding: 10px 20px; background: #000;
    }
    .svc__list::-webkit-scrollbar { display: none; }
    .svc__tab {
        flex: 0 0 auto; padding: .6rem 1.1rem;
        border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
        font-family: var(--font-label); font-size: .8rem; letter-spacing: .08em; color: #d9d9d9;
    }
    .svc__tab::before, .svc__tab-num { display: none; }
    .svc__tab:hover, .svc__tab:focus-visible { transform: none; }
    .svc__tab[aria-selected="true"] { background: var(--inetz-orange); border-color: var(--inetz-orange); color: #000; }
    .svc__stage { margin-top: 1rem; }

    .contact__intro { font-size: 15px; }
    .contact__top { display: block; }
    .contact__hq { margin-top: 2rem; }
    .display-title { font-size: 45px; }
}

@media (max-width: 767.98px) {
    .band { padding-block: 50px; }
    .eyebrow { font-size: 18px; }
    .display-title, .display-title--md, .display-title--sm { font-size: 2rem; }
    .testimonials__title { font-size: 2rem; }
    .testimonials__carousel { margin-top: 1.5rem; }

    .hero__inner { padding-top: 2.5rem; padding-bottom: 3rem; }
    /* On phones the size follows the width only, small enough that the longest word, APPLICATION, fits
       inside its black box without running off the screen (10vw, between 2rem and 3rem). */
    .hero__title { --hero-font: clamp(2rem, 10vw, 3rem); }
    .hero__line--custom { position: relative; left: 1rem; }
    .hero__line--app { position: relative; right: .5rem; }
    .hero__line--solutions { position: relative; right: 1rem; }

    .features__item { align-items: center; text-align: center; margin-bottom: 1.5rem; }
    .features__text { font-size: 1.75rem; }

    .services-teaser__text { font-size: 1rem; }

    .site-menu__nav a { font-size: 3rem; }
    .site-footer__col a, .site-footer__linkbutton { font-size: 1.2rem; }

    .about-hero__headline { --about-size: 3rem; }
    .about-hero__line--second { position: static; margin-top: 1rem; text-align: right; }
    .about-hero__row { flex-direction: column-reverse; margin-top: 0; min-height: 0; }
    .about-hero__year { margin-top: 40px; padding-top: 1.5rem; }
    .about-hero__year-num { -webkit-text-stroke-width: 1.5px; }
    .about-hero__copy { margin-top: 40px; }
    .about-hero__text { font-size: 1rem; max-width: none; margin-bottom: 1.5rem; }
    .team__grid { margin-top: 40px; }

    .svc-panel { border-radius: 18px; }
    .home-ai { background-image: none; }
    .qualities { grid-template-columns: 1fr; }
    .ai-hero__title { font-size: 2.25rem; }
    .ai-hero__title--band { font-size: 2rem; }
    .svc-panel__callout { font-size: 1.35rem; }
    .svc-panel__cols { grid-template-columns: 1fr; }
    .svc-panel__body { font-size: 1.05rem; }

    .work-with-us__actions { margin-top: 3rem; gap: 2rem; }

    .inquiry-wrap { margin-top: 50px; }
    .form-grid { grid-template-columns: 1fr; }
    .field__input, .field__label { font-size: 1.15rem; }
    .form-success__title { font-size: 1.8rem; }
    .form-success__text { font-size: 1.05rem; }

    .page-text__title { font-size: 30px; }
    .page-text__body h2 { font-size: 24px; }
    .page-text__body h3 { font-size: 20px; }

    .cookie-notice { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; padding: 20px 18px 22px; border-radius: 22px 22px 0 0; }
    .cookie-notice__buttons .cookie-btn { flex: 1 1 100%; }
    .cookie-modal .modal-header { padding: 1.25rem 1.25rem .9rem; }
    .cookie-modal .modal-body { padding: 0 1.25rem 1rem; }
    .cookie-modal .modal-footer { flex-wrap: wrap; padding: 1rem 1.25rem 1.25rem; }
    .cookie-modal .modal-footer .cookie-btn { flex: 1 1 100%; }
}

@media (max-width: 479.98px) {
    .site-footer__copy { font-size: 12px; }
    .site-footer__nav { gap: 1rem; }
    .services-teaser__body .btn-inetz { padding: 5px 8px; font-size: 1em; }
    .testimonials__carousel { padding-inline: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .form-notice, .field__error { animation: none; transition: none; }
    .form-success, .form-success__ring, .form-success__check { animation: none; stroke-dashoffset: 0; }
    .field__label { transition: none; }
    .svc__tab, .svc__tab::before { transition: none; }
    .svc-panel.is-entering, .svc-panel.is-leaving { animation: none; }
}

/* ---------- IP address page (/ip) ---------- */

.ip-page { background: #000; color: #fff; padding: clamp(2rem, 5vw, 4rem) 0 75px; }
.ip-page__address {
    margin: .25rem 0 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-weight: 700;
    font-size: clamp(2rem, 7.5vw, 5rem);
    line-height: 1.1;
    color: #fff;
    overflow-wrap: anywhere;
}
.ip-page__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.ip-page__tags li { padding: .2rem .9rem; border: 1px solid var(--inetz-orange); border-radius: 999px; font-family: var(--font-label); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .5px; color: #fff; }
.ip-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ip-page__secondary { background: transparent; border: 1px solid rgba(255, 255, 255, .5); border-radius: 5px; color: #fff; cursor: pointer; font-family: var(--font-label); font-weight: 700; font-size: 1.2rem; line-height: 1.6; padding: 9px 16px; text-transform: uppercase; }
.ip-page__secondary:hover, .ip-page__secondary:focus-visible { border-color: var(--inetz-orange); color: var(--inetz-orange); }
.ip-page__note { max-width: 62ch; margin: 1.5rem 0 0; padding: 1rem 1.25rem; border-left: 4px solid var(--inetz-orange); background: rgba(255, 255, 255, .06); color: #fff; }
.ip-page__grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 2.5rem; }
.ip-card { padding: clamp(1.25rem, 2.2vw, 2rem); border: 1px solid rgba(255, 255, 255, .14); border-radius: 24px; background: rgba(255, 255, 255, .04); color: #fff; }
.ip-card__title { margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.ip-card__list { margin: 0; }
.ip-card__list > div { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 6px 20px; padding: .65rem 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.ip-card__list > div:first-child { border-top: 0; padding-top: 0; }
.ip-card__list dt { font-family: var(--font-label); font-weight: 700; color: #d7d7d7; }
.ip-card__list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: #fff; }
.ip-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: .95em; }
.ip-headers { margin-top: 24px; }
.ip-headers summary { cursor: pointer; font-family: var(--font-label); font-weight: 700; font-size: 1.15rem; color: #fff; }
.ip-headers summary:hover, .ip-headers summary:focus-visible { color: var(--inetz-orange); }
.ip-headers[open] summary { margin-bottom: 1.25rem; }
.ip-headers__note { margin: 1.25rem 0 0; color: #d7d7d7; font-size: .9rem; }
.ip-page__fineprint { margin: 2rem 0 0; color: #d7d7d7; font-size: .9rem; }
.ip-page__fineprint code { color: #fff; background: rgba(255, 255, 255, .12); padding: .1rem .35rem; border-radius: 3px; }
@media (min-width: 992px) { .ip-page__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .ip-card__list > div { grid-template-columns: 1fr; } }

/* reCAPTCHA: the floating badge is hidden. Google allows that when its notice is shown, which the footer does on every page that
   loads reCAPTCHA (partials/footer.blade.php, partials/recaptcha-text.blade.php). See docs/forms.md. */
.grecaptcha-badge { visibility: hidden; }
.site-footer__recaptcha { margin-left: .5rem; }
.site-footer__recaptcha a { color: #c4c4c4; text-decoration: underline; }
.site-footer__recaptcha a:hover, .site-footer__recaptcha a:focus-visible { color: #fff; }

/* ---------- Print ----------
   Printing (or saving as PDF) gives just the content of the page: black text on white paper, no header, menu, footer, cookie
   banner or reCAPTCHA badge. Browsers do not print background colors by default, so the light text of the dark pages used to
   print as white on white. This block applies to every page, and matters most for the three policy documents
   (Privacy Policy, Acceptable Use Policy and the Web Hosting Acceptable Use Policy). See docs/design-system.md. */
@media print {
    @page { margin: 0.75in; }

    .skip-link, .site-header, .site-menu, .site-footer, .cookie-notice, .cookie-modal, .fun-modal, .modal-backdrop,
    .grecaptcha-badge { display: none !important; }

    html, body { background: #fff !important; }
    *, *::before, *::after { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }

    .band, .page-text { padding-block: 0 !important; }
    .page-text__title { margin-top: 0; }
    .page-text__body a { text-decoration: underline; }
    .page-text__body code, .page-text__body pre { border: 1px solid #999; }
    .btn-inetz { border: 1px solid #000 !important; }

    h1, h2, h3, h4 { break-after: avoid; }
    p, li { orphans: 3; widows: 3; }
}