/* Globuzz theme: "Classic". Drop-in replacement for /assets/style.css.
   The look of the original globuzz.in desktop site, rebuilt clean, in the Globuzz "ice" combination:
   near-black #0A0C11, Red Hat Display headings and Montserrat text, titles in a white > sky cyan > logo teal > mint
   gradient (#F0F8FB > #65D0EA > #1CA7C2 > #6AD0A2) with a passing shine, liquid-glass cards, thin white dividers with a
   dot, logo teal #1CA7C2 for hovers, and the empty-circle network behind the whole page (network.js), kept clear of all text.
   SEO and GEO rules: the first screen's text never animates; all real text stays in the HTML;
   only transform and opacity move; all motion respects prefers-reduced-motion. */
@font-face { font-family: "Red Hat Display"; src: url("/assets/fonts/red-hat-display-500.woff2") format("woff2"); font-weight: 500; font-display: optional; }
@font-face { font-family: "Red Hat Display"; src: url("/assets/fonts/red-hat-display-700.woff2") format("woff2"); font-weight: 700; font-display: optional; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: optional; }


:root {
  color-scheme: dark;
  --bg: #0a0c11;          /* near-black with a cool tint, so the cyan and mint glow */
  --bg-2: #0e1117;
  --surface: #12161d;
  --surface-2: #181d25;
  --line: #222831;
  --line-2: #343b46;
  --text: #ffffff;
  --muted: #b3b3b3;       /* passes AA on charcoal */
  --faint: #8a8a8a;
  --blue: #1ca7c2;        /* Globuzz logo teal: buttons on hover, the logo, focus glows */
  --ice: #f0f8fb;         /* the gradient starts near-white */
  --sky: #65d0ea;         /* sky cyan: links, subheadings, the network */
  --mint: #6ad0a2;        /* mint green: where the gradient ends */
  --teal-glow: rgba(28,167,194,.55);
  --glass: linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.04) 45%, rgba(101,208,234,.07)), rgba(12,15,21,.55);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3);
  --red: #fe3e3e;         /* kept only for draft placeholders; not used in the design */
  --on-blue: #06121a;
  --grad: linear-gradient(90deg, #f0f8fb 0%, #b2e9f5 16%, #65d0ea 36%, #1ca7c2 58%, #3fbcb6 78%, #6ad0a2 100%); /* the Globuzz combination: white > sky > logo teal > mint */
  --shine: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.8) 50%, transparent 58%); /* a light that passes over the gradient */
  --grad-btn: linear-gradient(90deg, #65d0ea 0%, #1ca7c2 22%, #6ad0a2 45%, #1ca7c2 55%, #1ca7c2 100%); /* buttons: sky > logo teal > mint, sliding to solid logo teal on hover */
  --max: 1180px;
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Red Hat Display", "Montserrat", "Segoe UI", system-ui, sans-serif;

  --r: 4px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font: 400 16px/1.75 var(--font); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; }
::selection { background: rgba(28,167,194,.4); color: #fff; }
a { color: var(--sky); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mint); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--blue); color: var(--on-blue); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* the thin red line along the top, as on the old site: it fills as you scroll */
body::before { content: ""; position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(.12); z-index: 70; pointer-events: none; }

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0 0 .55em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 500; line-height: 1.08; color: var(--sky); }
/* headings in the Globuzz combination (white > sky cyan > mint), with a light that passes over them now and then;
   they glow when the cursor reaches them. The H1 carries the gradient but never moves. */
h1, .section > .wrap > h2, .band h2, .tag, .panel h3 { background-image: var(--shine), var(--grad); background-size: 300% 100%, var(--tw, 100%) 100%; background-position: 100% 0, var(--tx, 0px) 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; transition: filter .4s var(--ease); }
h1 { background-image: var(--grad); background-size: var(--tw, 100%) 100%; background-position: var(--tx, 0px) 0; }
.section > .wrap > h2:hover, .band h2:hover, .panel:hover h3, html.scrolling .section > .wrap > h2.lit, html.scrolling .panel.lit h3 { filter: drop-shadow(0 0 22px rgba(101,208,234,.6)); }
.section > .wrap > h2::before { transition: box-shadow .6s, width .6s var(--ease); }
.section > .wrap > h2.lit::before { width: 120px; } /* the line stays long once reached */
html.scrolling .section > .wrap > h2.lit::before { box-shadow: 0 0 14px rgba(101,208,234,.9), 0 0 30px rgba(106,208,162,.5); } /* the title's line lights up and stretches as the section arrives */
@media (max-width: 700px) { html.scrolling .section > .wrap > h2.lit, html.scrolling .panel.lit h3 { filter: none; } } /* phones: the line glows instead of the letters (cheaper) */
h3 { font-size: 1.32rem; font-weight: 500; color: var(--sky); margin-top: 1.4em; }
h4 { font-size: 1.08rem; color: var(--sky); }
p, ul, ol { margin: 0 0 1em; }

/* Buttons: square-cornered, as on the old site */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--grad-btn) 0 0 / 220% 100%; color: var(--on-blue); font: 600 .95rem/1.2 var(--font); letter-spacing: .03em; padding: 14px 24px; border-radius: var(--r); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .25s var(--ease), background-position .45s var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .25s; }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg) translateX(0); opacity: 0; z-index: -1; pointer-events: none; }
.btn:hover { color: #fff; background-position: 100% 0; border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(28,167,194,.18), 0 14px 34px -10px var(--teal-glow); }
.btn:active { transform: translateY(0) scale(.98); background-position: 100% 0; color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--blue); background-image: none; color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28,167,194,.14), 0 14px 34px -12px var(--teal-glow); }
.btn-ghost:active { background: var(--blue); border-color: var(--blue); color: #fff; }
#site-nav a:active, .related a:active, .more:active { color: var(--sky); }
.btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); pointer-events: none; z-index: -1; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(10,12,17,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.bar { display: flex; align-items: center; gap: 16px; min-height: 72px; flex-wrap: wrap; }
.logo, .foot-brand { /* the Globuzz logo image; the link keeps its text for search engines and screen readers */
  display: inline-block; width: 152px; height: 41px; background: url("/assets/brand/lockup.webp") left center / contain no-repeat;
  color: transparent; text-indent: 110%; white-space: nowrap; overflow: hidden; text-decoration: none; transition: filter .3s, transform .3s var(--ease); }
.logo:hover { filter: drop-shadow(0 0 10px var(--teal-glow)); transform: translateY(-1px); }
#site-nav { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
#site-nav > ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; flex-wrap: wrap; align-items: center; }
#site-nav a, #site-nav summary { color: #fff; text-decoration: none; padding: 9px 9px; display: block; cursor: pointer; font-weight: 500; font-size: .93rem; letter-spacing: .01em; transition: color .2s; }
#site-nav > ul > li > a:hover, #site-nav summary:hover, .menu[open] summary { color: var(--sky); }
#site-nav a.btn { color: var(--on-blue); padding: 11px 18px; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; margin-left: 7px; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.menu[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.menu-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: rgba(18,22,29,.86); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255,255,255,.12); border-top: 2px solid var(--blue); border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); padding: 20px 24px; display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 6px 32px; min-width: 480px; }
.menu-small .menu-panel { grid-template-columns: 1fr; min-width: 200px; }
.menu-panel .menu-all { grid-column: 1 / -1; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
#site-nav .menu-panel .menu-all a { color: var(--sky); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
#site-nav .menu-panel a { padding: 6px 0; font-weight: 400; }
#site-nav .menu-panel a:hover { color: var(--mint); }
.menu-title, .foot-title { font-size: .86rem; color: var(--faint); font-weight: 500; margin: 10px 0 4px; letter-spacing: .04em; }
.nav-toggle { display: none; margin-left: auto; background: transparent; border: 1.5px solid var(--blue); border-radius: var(--r); padding: 8px 16px; font: 500 1rem var(--font); color: var(--sky); }

/* Home hero: the linked-squares network behind the text (network.js adds the canvas) */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 120px) 0 clamp(72px, 9vw, 110px); min-height: min(88vh, 820px); display: flex; align-items: center; background: transparent; }
canvas.network { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; pointer-events: none; }
.site-header { z-index: 50; }
main, .site-footer { position: relative; z-index: 1; }
main { overflow-x: clip; } /* scroll parallax may nudge blocks sideways; never let that widen the page */
html.gz-measure * { translate: none !important; } /* set for a moment by network.js while it measures; never painted */
.hero .wrap { position: relative; z-index: 1; width: 100%; pointer-events: none; }
.hero .wrap a, .hero .wrap button { pointer-events: auto; }
.hero .wrap::before { /* the Globuzz wordmark from the logo, in the white > sky > mint combination with a passing shine; decorative */
  content: ""; display: block; width: min(620px, 82vw); aspect-ratio: 707 / 140; margin: 0 0 28px -4px;
  background: var(--shine) 100% 0 / 300% 100% no-repeat, var(--grad);
  -webkit-mask: url("/assets/brand/wordmark.webp") left center / contain no-repeat; mask: url("/assets/brand/wordmark.webp") left center / contain no-repeat;
}
.hero::before { /* faint grid, as behind the old desktop hero */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000, transparent); mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000, transparent); }
.hero h1 { max-width: 20ch; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; }
.hero::after { content: "scroll to discover  \2193"; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font: 400 .82rem var(--font); color: var(--faint); letter-spacing: .06em; z-index: 1; }
.eyebrow { font-weight: 500; color: var(--sky); margin-bottom: .8em; font-size: 1rem; letter-spacing: .04em; }
.lead { font-size: clamp(1.06rem, 1.4vw, 1.2rem); max-width: 58ch; color: #e6e6e6; }

/* Inner page heads */
.page-hero { position: relative; padding: 36px 0 56px; border-bottom: 1px solid var(--line); background: radial-gradient(70% 120% at 90% 0%, rgba(28,167,194,.12), transparent 60%); }
.page-hero h1 { max-width: 22ch; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 20px; font-size: .92rem; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--faint); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: #fff; }

/* Sections: a short white rule above every section title, as on the old site */
.section { position: relative; padding: clamp(64px, 8vw, 110px) 0; }
.section::before { /* thin white divider with a dot, as on the old desktop site */
  content: ""; position: absolute; top: 0; left: max(20px, calc(50% - var(--max) / 2 + 20px)); right: max(20px, calc(50% - var(--max) / 2 + 20px)); height: 1px; background: rgba(255,255,255,.55); }
.section::after { content: ""; position: absolute; top: -6px; left: max(20px, calc(50% - var(--max) / 2 + 20px)); width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.section.tight::before, .section.tight::after { display: none; }
.section.alt { background: rgba(255,255,255,.02); }
.section.tight { padding: 28px 0; }
.section > .wrap > h2 { max-width: 26ch; }
.section > .wrap > h2::before { content: ""; display: block; width: 72px; height: 2px; background: var(--grad); margin-bottom: 22px; transform-origin: left; }
.section > .wrap > h2 { margin-bottom: .45em; }
.section > .wrap > h2 + p { font-size: 1.1rem; color: #e0e0e0; max-width: 64ch; }
.section p, .section li { max-width: 70ch; }

.panels { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin: 32px 0; }
.panel { position: relative; border: 0; border-radius: 20px; padding: 32px; color: #fff; background: radial-gradient(260px circle at var(--mx, -200px) var(--my, -200px), rgba(28,167,194,.22), transparent 70%), var(--glass); box-shadow: var(--glass-edge), 0 24px 60px -30px rgba(0,0,0,.9);  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; transform-style: preserve-3d; }

.panel:hover { box-shadow: var(--glass-edge), 0 0 0 1px rgba(28,167,194,.35), 0 30px 60px -26px var(--teal-glow); }
.panel h3 { margin-top: 0; font-size: 1.7rem; }
.panel a { color: var(--sky); }
.panel p { color: #d6d6d6; }
.tag { font-weight: 600; font-size: 1.08rem; }
.panel .tag { color: transparent; }

.more { font-weight: 500; }
.note { color: var(--muted); font-size: .95rem; }

.points { list-style: none; padding: 0; display: grid; gap: 12px; }
.points li { position: relative; padding-left: 28px; }
.points li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border: 1.5px solid var(--blue); transform: rotate(45deg); }

.plain { list-style: none; padding: 0; margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); column-gap: 40px; border-top: 1px solid var(--line); }
.plain li { padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; color: var(--muted); max-width: none; transition: padding-left .3s var(--ease); }
.plain li a { font-weight: 500; color: var(--sky); text-decoration: none; }
.plain li:hover { padding-left: 8px; }
.plain li:hover a { color: var(--mint); }

.steps { position: relative; list-style: none; padding: 0; counter-reset: step; display: block; max-width: 1000px; margin: 48px auto 0; }
/* How a project runs: a zig-zag timeline. A glowing line runs down the middle, each step sits on alternate sides
   with its number in a circle on the line (phones: the line on the left, steps stacked on the right). */
.steps li { counter-increment: step; position: relative; transition: transform .3s var(--ease), box-shadow .3s; border-radius: 18px; padding: 22px 24px; margin: 0; max-width: none; color: var(--muted); width: calc(50% - 56px); }
.steps li:nth-child(odd) { margin-right: auto; }
.steps li:nth-child(even) { margin-left: auto; }
.steps li + li { margin-top: -38px; }
.steps li::before { content: "0" counter(step); position: absolute; top: 20px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .95rem/1 var(--font); color: var(--sky); background: var(--bg); border: 2px solid rgba(101,208,234,.8); box-shadow: 0 0 0 5px var(--bg), 0 0 22px rgba(101,208,234,.45); }
.steps li:nth-child(odd)::before { right: -79px; }
.steps li:nth-child(even)::before { left: -79px; }
.steps::before { content: ""; position: absolute; left: calc(50% - 1px); top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, #f0f8fb, #65d0ea 35%, #1ca7c2 65%, #6ad0a2); opacity: .75; transform-origin: top; z-index: 0; box-shadow: 0 0 12px rgba(101,208,234,.5); }
/* phones: the scroll glow 2% softer than on desktop */
@media (max-width: 700px) { :root { --glass-pop: 0 0 0 1px rgba(101,208,234,.54), 0 30px 70px -22px rgba(28,167,194,.78), 0 0 64px -6px rgba(101,208,234,.49); } }
.steps li { z-index: 1; }
.steps strong { display: block; color: #fff; font-weight: 500; font-size: 1.12rem; margin-bottom: 2px; }

.cards { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 28px; }
.card { position: relative; border: 0; border-radius: 18px; padding: 24px; color: #fff; background: radial-gradient(220px circle at var(--mx, -200px) var(--my, -200px), rgba(28,167,194,.22), transparent 70%), var(--glass); box-shadow: var(--glass-edge), 0 20px 50px -28px rgba(0,0,0,.9);  max-width: none; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; transform-style: preserve-3d; }
.card:hover { box-shadow: var(--glass-edge), 0 0 0 1px rgba(28,167,194,.35), 0 26px 52px -24px var(--teal-glow); }
.card h3, .card h4 { margin: 0 0 .4em; }
.card h3 a, .card h4 a { color: #fff; text-decoration: none; }
.card:hover h3 a, .card:hover h4 a { color: var(--sky); }
.card h3 a::after, .card h4 a::after { content: ""; position: absolute; inset: 0; }
.card p { margin: 0; color: #cfcfcf; font-size: .96rem; }

/* Industries: each card gets its own line icon (chosen from the card's link), a gradient edge and a hover lift */
.cards .card { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='10' cy='12' r='4'/%3E%3Ccircle cx='30' cy='10' r='4'/%3E%3Ccircle cx='20' cy='30' r='4'/%3E%3Cpath d='M13.5 13.5l4.5 13M26.5 12.5l-4.5 14M14 11.5l12-1'/%3E%3C/svg%3E"); }
.cards .card:has(h3 > a), .cards .card[data-industry] { padding-top: 72px; overflow: hidden; }
.cards .card:has(h3 > a)::before {
  content: ""; position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; background: var(--grad);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transition: transform .45s var(--ease);
}
.cards .card:has(h3 > a)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.cards .card:has(h3 > a):hover::after { transform: scaleX(1); }
.cards .card:has(h3 > a):hover::before { transform: translateY(-4px) scale(1.08); }
.card:has(a[href*="real-estate"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6 36V14l10-6v28M16 36V4l18 8v24M3 36h34M21 12h3M21 18h3M21 24h3M27 15h3M27 21h3M27 27h3M10 18h2M10 24h2M10 30h2'/%3E%3C/svg%3E"); }
.card:has(a[href*="d2c"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7 13h26l-2 23H9z'/%3E%3Cpath d='M14 16v-5a6 6 0 0 1 12 0v5'/%3E%3C/svg%3E"); }
.card:has(a[href*="clinic"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='5' width='30' height='30' rx='6'/%3E%3Cpath d='M20 12v16M12 20h16'/%3E%3C/svg%3E"); }
.card:has(a[href*="manufactur"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3Cpath d='M20 4v5M20 31v5M4 20h5M31 20h5M8.7 8.7l3.5 3.5M27.8 27.8l3.5 3.5M8.7 31.3l3.5-3.5M27.8 12.2l3.5-3.5'/%3E%3C/svg%3E"); }
.card:has(a[href*="manufactur"]):hover::before { transform: rotate(60deg) scale(1.08); }
/* more industries (15 Oct): each picks its icon from its link */
.card:has(a[href*="restaurant"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 5v9a3 3 0 0 0 6 0V5M13 5v30M28 35V5c-4 3-5 8-5 12s2 5 5 5'/%3E%3C/svg%3E"); }
.card:has(a[href*="education"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 15l17-8 17 8-17 8z'/%3E%3Cpath d='M10 18.5V27c0 3 5 5 10 5s10-2 10-5v-8.5M36 15v10'/%3E%3C/svg%3E"); }
.card:has(a[href*="hotel"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 31V9M5 23h30v8M35 23v-3a5 5 0 0 0-5-5H18v8'/%3E%3Ccircle cx='11' cy='18' r='3'/%3E%3C/svg%3E"); }
.card:has(a[href*="retail"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7 17v17h26V17M4 17l3-9h26l3 9'/%3E%3Cpath d='M4 17a4 4 0 0 0 8 0a4 4 0 0 0 8 0a4 4 0 0 0 8 0a4 4 0 0 0 8 0M16 34v-9h8v9'/%3E%3C/svg%3E"); }
.card:has(a[href*="professional"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='12' width='30' height='21' rx='3'/%3E%3Cpath d='M15 12V8h10v4M5 21h30M18 21v3h4v-3'/%3E%3C/svg%3E"); }
.card:has(a[href*="salon"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='11' cy='29' r='5'/%3E%3Ccircle cx='29' cy='29' r='5'/%3E%3Cpath d='M14.5 25.5L31 6M25.5 25.5L9 6'/%3E%3C/svg%3E"); }
.card:has(a[href*="automobile"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 27v-6l4-8h22l4 8v6z'/%3E%3Cpath d='M5 21h30'/%3E%3Ccircle cx='12' cy='27' r='3.5'/%3E%3Ccircle cx='28' cy='27' r='3.5'/%3E%3C/svg%3E"); }
.card:has(a[href*="logistics"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 10h21v17H3zM24 15h7l6 6v6H24'/%3E%3Ccircle cx='10' cy='29' r='3.5'/%3E%3Ccircle cx='30' cy='29' r='3.5'/%3E%3C/svg%3E"); }

.section h3 + p { color: var(--muted); }

.related { border-top: 1px solid var(--line); padding-top: 18px; }
.related-title { font-weight: 500; margin-bottom: 8px; }
.related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.related a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: var(--r); text-decoration: none; color: #fff; }
.related a:hover { border-color: var(--blue); color: var(--sky); }

/* Closing band: the "REQUEST A PROPOSAL" feel of the old site */
.band { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 110px) 0; text-align: center; background: rgba(255,255,255,.02); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(50% 120% at 50% 100%, rgba(28,167,194,.22), transparent 70%); }
.band .wrap { position: relative; }
.band h2 { max-width: 22ch; margin-left: auto; margin-right: auto; font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.7rem); text-transform: uppercase; letter-spacing: .02em; }
.band p { color: var(--muted); }
.band .actions { justify-content: center; }
.updated { margin: 0; padding: 16px 0; font-size: .9rem; color: var(--faint); border-top: 1px solid var(--line); }

/* Tables */
.table-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 520px; }
th, td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { background: var(--surface-2); font-weight: 500; color: var(--sky); }
td ul { margin: 0; padding-left: 1.1em; }

/* Calculator and forms */
.calc { display: grid; gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-top: 24px; padding: 28px; border-radius: 20px; background: var(--glass); box-shadow: var(--glass-edge), 0 24px 60px -30px rgba(0,0,0,.9);  }
.calc .note, .calc .results { grid-column: 1 / -1; }
.calc .note { margin: 0; }
.enquiry { display: grid; gap: 14px; max-width: 560px; }
.calc label, .enquiry label { display: grid; gap: 6px; font-weight: 500; font-size: .96rem; }
input, select, textarea { font: inherit; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; width: 100%; background: rgba(0,0,0,.35); color: #fff; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28,167,194,.2); }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: 14px; padding: 20px 22px; background: radial-gradient(120% 140% at 0% 0%, rgba(28,167,194,.28), transparent 60%), rgba(10,10,10,.55); box-shadow: inset 0 0 0 1px rgba(28,167,194,.3); color: var(--muted); }
.results p { margin: 0; }
.results strong { display: block; font: 700 clamp(1.9rem, 4vw, 2.6rem)/1.1 var(--font); color: #fff; font-variant-numeric: tabular-nums; }
.results p + p strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.two { display: grid; gap: 48px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.contact-list { list-style: none; padding: 0; }
.placeholder { background: rgba(106,208,162,.14); color: var(--mint); padding: 2px 6px; border-radius: 3px; font-weight: 500; }
.box { display: block; padding: 28px; border: 2px dashed rgba(106,208,162,.5); border-radius: var(--r); }

/* Footer: muted, as on the old site */
.site-footer { background: #07090d; color: var(--faint); padding: 64px 0 28px; font-size: .95rem; border-top: 1px solid var(--line); }
.site-footer a { color: #d9d9d9; text-decoration: none; }
.site-footer a:hover { color: var(--sky); }
.foot-cols { display: grid; gap: 32px; grid-template-columns: 1.3fr repeat(3, minmax(170px, 1fr)); }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 8px; }
.site-footer li { margin-bottom: 5px; }
.site-footer .foot-title { color: #fff; font-size: 1.02rem; margin-top: 0; }
.foot-brand { width: 200px; height: 54px; margin-bottom: .6em; }
.legal { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .88rem; color: #8b919c; } /* 6:1 contrast */

/* WhatsApp (left) keeps the bottom-right corner free for the AI Lead Reply chat */
.wa { position: fixed; left: 16px; bottom: 16px; z-index: 40; background: #0e7a3f; color: #fff; /* white on this green passes AA (5.4:1) */ text-decoration: none; padding: 10px 18px; border-radius: var(--r); font-weight: 500; font-size: .95rem; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); display: flex; flex-direction: column; line-height: 1.2; }
.wa:hover { color: #fff; }
.wa span { font-weight: 400; font-size: .8rem; }
#lead-chat-slot { position: fixed; right: 16px; bottom: 16px; width: 0; height: 0; }
.consent { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 45; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: min(560px, calc(100% - 32px)); box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); }
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 220px; font-size: .95rem; }
.consent .btn { padding: 8px 16px; }

/* Desktop header stays on one line */
@media (min-width: 901px) { .bar, #site-nav, #site-nav > ul { flex-wrap: nowrap; } #site-nav a, #site-nav summary { white-space: nowrap; } }
/* the two service menus have five groups each: three columns on desktop, kept inside the window */
@media (min-width: 901px) { .menu-wide .menu-panel { grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 6px 28px; min-width: 760px; max-width: calc(100vw - 48px); background: rgba(14,17,23,.96); } #site-nav .menu-wide .menu-panel a { white-space: normal; display: inline-block; line-height: 1.35; padding: 5px 0; } }
@media (min-width: 901px) and (max-width: 1199px) { #site-nav > ul > li:nth-child(2) .menu-panel { left: -140px; } }

/* Small screens */
@media (max-width: 900px) {
  #site-nav { flex: 0 0 100%; flex-direction: column; align-items: stretch; }
  .js .nav-toggle { display: inline-block; }
  .js #site-nav { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; padding-bottom: 16px; }
  .js #site-nav.open { display: flex; }
  #site-nav > ul { flex-direction: column; align-items: stretch; width: 100%; }
  .menu-panel { position: static; box-shadow: none; min-width: 0; grid-template-columns: 1fr; border: 0; padding: 0 0 8px 12px; background: transparent; }
  .menu-small .menu-panel { min-width: 0; }
  #site-nav a.btn { justify-content: center; }
  .hero { min-height: 0; }
    .hero::after { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-cols > :first-child { grid-column: 1 / -1; }
  .calc { grid-template-columns: 1fr; padding: 20px; }
  .wa { padding: 8px 14px; font-size: .86rem; left: 12px; bottom: 12px; }

}
@media (max-width: 520px) { .foot-cols { grid-template-columns: 1fr; } .results { grid-template-columns: 1fr; } }

/* ================= Liquid glass on every block ================= */
/* Very transparent glass with a bright refracting rim (a gradient border), a specular highlight at the top, and a
   light that follows the cursor. No backdrop blur: blurring the moving network halves the frame rate. */
:root {
  --glass: linear-gradient(140deg, rgba(255,255,255,.11), rgba(255,255,255,.025) 38%, rgba(101,208,234,.045) 72%, rgba(255,255,255,.07)), rgba(10,12,17,.16);
  --rim: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.06) 32%, rgba(101,208,234,.10) 60%, rgba(106,208,162,.45));
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 30px rgba(101,208,234,.05);
  --glass-pop: 0 0 0 1px rgba(101,208,234,.55), 0 30px 70px -22px rgba(28,167,194,.8), 0 0 64px -6px rgba(101,208,234,.5);
}
.panel, .card, .steps li, .calc, .plain li, .points li, .results, .table-wrap, .section > .wrap > h3, .section > .wrap > h3 + p, .band .wrap {
  border: 1px solid transparent !important;
  background:
    radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px), rgba(255,255,255,.13), rgba(101,208,234,.10) 35%, transparent 70%) padding-box,
    var(--glass) padding-box,
    var(--rim) border-box !important;
  box-shadow: var(--glass-edge), 0 24px 60px -34px rgba(0,0,0,.9);
  transition: transform .45s var(--ease), box-shadow 1s var(--ease), translate 1s var(--ease), scale 1s var(--ease); /* settling back is slow and soft */
}
.panel:hover, .card:hover, .steps li:hover, .calc:hover, .plain li:hover, .points li:hover, .section > .wrap > h3:hover, .section > .wrap > h3:hover + p, .band .wrap:hover {
  box-shadow: var(--glass-edge), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 60px rgba(101,208,234,.10), var(--glass-pop); /* no filter: a filtered block would repaint every frame its animated title moves */
}
/* Scroll glow: muted at rest. Only while the page is scrolling (html.scrolling, set by motion.js) does the block you are
   reading, the one crossing the middle of the screen (.lit), glow and rise a little; when scrolling stops it settles back. */
html.scrolling .lit:is(.panel, .card, .steps li, .calc, .plain li, .points li, .band .wrap), html.scrolling .section > .wrap > h3.lit, html.scrolling .section > .wrap > h3.lit + p {
  box-shadow: var(--glass-edge), inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 60px rgba(101,208,234,.12), var(--glass-pop);
  translate: 0 -4px; scale: 1.012;
  transition: transform .45s var(--ease), box-shadow .35s var(--ease), translate .45s var(--ease), scale .45s var(--ease); /* lighting up is quick */
}
/* while scrolling, only the lit block glows: a block the cursor merely passes over stays muted (no second glow) */
html.scrolling :is(.panel, .card, .steps li, .calc, .plain li, .points li, .band .wrap):not(.lit):hover, html.scrolling .section > .wrap > h3:not(.lit):hover, html.scrolling .section > .wrap > h3:not(.lit):hover + p {
  box-shadow: var(--glass-edge), 0 24px 60px -34px rgba(0,0,0,.9);
}
html.scrolling .section > .wrap > h2:not(.lit):hover, html.scrolling .panel:not(.lit):hover h3 { filter: none; }
/* blocks that do not tilt still lift and swell when the cursor reaches them */
.plain li:hover, .points li:hover, .calc:hover { transform: translateY(-6px) scale(1.015); }
/* list items become glass tiles */
.plain { border-top: 0; gap: 14px; column-gap: 14px; }
.plain li { border-radius: 16px; padding: 18px 20px; margin: 0; }
.plain li:hover { padding-left: 20px; }
.points { gap: 12px; }
.points li { border-radius: 14px; padding: 14px 18px 14px 46px; }
.points li::before { left: 20px; top: 1.2em; }
/* FAQ: each question and its answer read as one glass card */
.section > .wrap > h3 { border-radius: 18px 18px 0 0; padding: 20px 24px 6px; margin: 26px 0 0; max-width: 820px; border-bottom-width: 0 !important; }
.section > .wrap > h3 + p { border-radius: 0 0 18px 18px; padding: 4px 24px 22px; margin: 0; max-width: 820px; border-top-width: 0 !important; box-shadow: var(--glass-edge), 0 30px 60px -36px rgba(0,0,0,.9); }
.results { border-radius: 14px; }
.table-wrap { border-radius: 16px; }
.band { background: transparent; border: 0; }
.band::before { opacity: .8; }
.band .wrap { max-width: min(980px, calc(100% - 32px)); border-radius: 28px; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px); }
.related a { background: var(--glass); box-shadow: var(--glass-edge); border-radius: 999px; }

/* ================= Room to breathe ================= */
.section { padding: clamp(84px, 11vw, 150px) 0; }
.section > .wrap > h2 + p { margin-bottom: 1.6em; }
.panels { gap: 26px; margin: 40px 0; }
.cards, .steps { gap: 20px; }
/* Hero (desktop and tablet): the words sit lower and narrower, leaving the top and the right side open so the
   network and glow are seen around them */
@media (min-width: 701px) {
  .hero { min-height: clamp(640px, 100vh, 1080px); align-items: flex-end; padding: clamp(140px, 22vh, 260px) 0 clamp(120px, 16vh, 170px); } /* capped, so a very tall window (or a search engine's renderer) never gets a giant hero */ /* the bottom keeps the buttons clear of the WhatsApp badge */
  .hero .wrap > * { max-width: 600px; }
  .hero .wrap::before { width: min(470px, 38vw); margin-bottom: 22px; }
  .hero h1 { font-size: clamp(2rem, 3vw, 2.7rem); max-width: 17ch; line-height: 1.1; }
  .lead { font-size: clamp(1rem, 1.15vw, 1.1rem); max-width: 50ch; line-height: 1.7; }
  .eyebrow { font-size: .95rem; }
}
@media (max-width: 700px) {
  /* phones: an open stage at the top of the hero, so the network and glow are seen before the words */
  .hero { min-height: min(100svh, 940px); align-items: flex-end; padding: clamp(120px, 26svh, 240px) 0 112px; }
  .hero .wrap::before { width: min(420px, 66vw); margin-bottom: 16px; }
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .lead { font-size: .97rem; line-height: 1.6; }
  .eyebrow { font-size: .9rem; }
  .section { padding: 92px 0; }
  .panel { padding: 26px 22px; }
  .wa { bottom: 10px; }
}

/* Cursor ring (desktop): trails the cursor, swells over anything clickable */
.cursor-ring { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(101,208,234,.8);
  pointer-events: none; z-index: 90; opacity: 0; transition: opacity .3s, width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s, border-color .3s; }
.cursor-ring.on { opacity: 1; }
.cursor-ring.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background-color: rgba(28,167,194,.12); border-color: rgba(106,208,162,.9); }
.cursor-ring.press { width: 24px; height: 24px; margin: -12px 0 0 -12px; background-color: rgba(28,167,194,.35); }

/* Buttons lean toward the cursor (motion.js sets --bx / --by) */
.btn { transform: translate(var(--bx, 0px), var(--by, 0px)); }
.btn:hover { transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 3px)) scale(1.03); }
.btn:active { transform: translate(var(--bx, 0px), var(--by, 0px)) scale(.97); }

/* the scroll line along the top: motion.js adds .scroll-line and moves only that element */
.scroll-line { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); z-index: 70; pointer-events: none; }
html.has-scroll-line body::before { display: none; }

/* ================= Motion: only for people who have not asked for less ================= */
@media (prefers-reduced-motion: no-preference) {
  /* the wordmark's gradient and the headings get a passing light */
  .hero .wrap::before { animation: sheen 6s ease-in-out infinite; }
  .section > .wrap > h2, .band h2 { animation: sheen 7s ease-in-out infinite; }
  .tag, .panel h3 { animation: sheen 6s ease-in-out infinite; }
  .panel:nth-child(2) h3, .panel:nth-child(2) .tag { animation-delay: -2.5s; }
  @keyframes sheen { 0%, 30% { background-position: 100% 0, var(--tx, 0px) 0; } 80%, 100% { background-position: 0 0, var(--tx, 0px) 0; } }
  .btn .ripple { animation: ripple .6s var(--ease) forwards; }
  @keyframes ripple { to { transform: scale(4); opacity: 0; } }
  .hero::after { animation: bob 2.4s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translate(-50%, 5px); } }
  .btn:hover::after { opacity: 1; animation: shine .7s var(--ease); }
  @keyframes shine { from { transform: skewX(-20deg) translateX(0); } to { transform: skewX(-20deg) translateX(420%); } }
  .points li::before { transition: transform .5s var(--ease); }
  .points li:hover::before { transform: rotate(225deg); }
  .results.bump strong { animation: bump .5s var(--ease); }
  @keyframes bump { 40% { transform: translateY(-3px); } }

  /* Desktop only: leaving the hero zooms through the GloBuzz wordmark while the words lift away (motion.js sets --hp
     on the hero itself, 0 at load, so the first screen never moves) */
  @media (min-width: 701px) {
    .hero .wrap::before { transform: translateY(calc(var(--hp, 0) * -60px)) scale(calc(1 + var(--hp, 0) * .4)); transform-origin: 20% 60%; opacity: calc(1 - var(--hp, 0) * 1.4); }
    .hero .wrap > * { transform: translateY(calc(var(--hp, 0) * -60px)); opacity: calc(1 - var(--hp, 0) * .9); }
    .hero .wrap > h1 { transform: translateY(calc(var(--hp, 0) * -100px)); }
  }

  /* Scroll reveals: intentional left and right. A title arrives from the left, its words from the right, side-by-side
     blocks from their own side, the steps zig-zag. Only transform and opacity, once per block. motion.js marks only
     blocks below the first screen. */
  html.sx { --rx: 90px; }
  html.sx [data-r] { opacity: 0; transition: opacity .9s cubic-bezier(.22,1,.36,1) var(--d, 0s), transform 1.1s cubic-bezier(.22,1,.36,1) var(--d, 0s); }
  html.sx [data-r="left"] { transform: translate3d(calc(var(--rx) * -1), 0, 0); }
  html.sx [data-r="right"] { transform: translate3d(var(--rx), 0, 0); }
  html.sx [data-r="up"] { transform: translate3d(0, 50px, 0); }
  html.sx [data-r].in { opacity: 1; transform: none; }
  html.sx .section > .wrap > h2[data-r]::before { transform: scaleX(0); transition: transform 1s cubic-bezier(.22,1,.36,1) .35s; }
  html.sx .section > .wrap > h2[data-r].in::before { transform: scaleX(1); }
  html.sx .steps::before { transform: scaleY(0); transition: transform 1.8s cubic-bezier(.22,1,.36,1) .2s; }
  html.sx .steps.in::before { transform: scaleY(1); }
  /* phones: shorter slides and no endless shine, so scrolling stays smooth */
  @media (max-width: 700px) {
    html.sx { --rx: 44px; }
    html.sx [data-r] { transition-duration: .7s, .8s; }
    .section > .wrap > h2, .band h2, .tag, .panel h3, .hero .wrap::before { animation: none; }
  }
}

/* If a browser cannot clip a gradient to text, show the headings in plain white rather than invisible */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  h1, .section > .wrap > h2, .band h2, .tag, .panel h3, .results p + p strong { background: none !important; color: #fff !important; }
}

@media (max-width: 900px) {
  .steps { margin-top: 36px; }
  .steps::before { left: 22px; }
  .steps li, .steps li:nth-child(n) { width: auto; margin: 0 0 16px 66px; }
  .steps li + li { margin-top: 0; }
  .steps li:nth-child(n)::before { left: -67px; right: auto; }
}

/* Phones: every block is inset from both edges (about 26 px more than the text), so the background network and the
   glow stay visible beside the content in every section. Headings and paragraphs keep the full width. */
@media (max-width: 700px) {
  .panels, .cards, .plain, .points, .steps, .calc, .table-wrap, .section > .wrap > h3, .section > .wrap > h3 + p { margin-left: 26px !important; margin-right: 26px !important; }
  .band .wrap { max-width: calc(100% - 72px); }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .panel, .cards .card, .calc { padding-left: 20px; padding-right: 20px; }
  .cards .card:has(h3 > a) { padding-top: 64px; }
  .cards .card:has(h3 > a)::before { left: 20px; top: 18px; width: 34px; height: 34px; }
  .plain li, .points li { padding-left: 18px; padding-right: 16px; }
  .points li { padding-left: 42px; }
  .steps { margin-left: 0 !important; } /* the timeline's own line and circles already leave the left side open */
  .steps::before { left: 22px; }
}

/* Shorter home page (16 Oct): six compact service cards per side, industry chips, the five steps in one row */
.cards.compact { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards.compact .card:has(h3 > a) { padding-top: 22px; }
.cards.compact .card:has(h3 > a)::before { display: none; }
.cards.compact .card h3 { font-size: 1.15rem; }
.see-all { margin-top: 28px; }
.chips { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { margin: 0; max-width: none; }
.chips a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--glass); box-shadow: var(--glass-edge); color: #fff; text-decoration: none; font-weight: 500; font-size: .98rem; transition: color .25s, box-shadow .25s, transform .25s var(--ease); }
.chips a:hover, .chips a:focus-visible { color: var(--sky); box-shadow: var(--glass-edge), 0 0 0 1px rgba(28,167,194,.45), 0 12px 30px -14px var(--teal-glow); transform: translateY(-2px); }
@media (min-width: 901px) {
  .steps.steps-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; max-width: none; margin-top: 40px; padding-top: 68px; }
  .steps.steps-row::before { left: 23px; right: 23px; top: 22px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, #f0f8fb, #65d0ea 35%, #1ca7c2 65%, #6ad0a2); transform-origin: left; }
  .steps.steps-row li, .steps.steps-row li:nth-child(n) { width: auto; margin: 0; padding: 18px 18px 20px; font-size: .95rem; }
  .steps.steps-row li:nth-child(n)::before { top: -68px; left: 0; right: auto; }
  html.sx .steps.steps-row::before { transform: scaleX(0); }
  html.sx .steps.steps-row.in::before { transform: scaleX(1); }
}
@media (max-width: 900px) { .steps.steps-row li { padding: 14px 18px; margin-bottom: 12px; } }
@media (max-width: 700px) {
  .chips, .see-all { margin-left: 26px; margin-right: 26px; }
  .chips a { padding: 9px 14px; font-size: .92rem; }
  .cards.compact .card:has(h3 > a) { padding-top: 18px; padding-bottom: 18px; }
  .cards.compact { gap: 12px; }
}
.section.tight { padding: clamp(60px, 6.5vw, 96px) 0; }
@media (max-width: 700px) { .section.tight { padding: 64px 0; } }
@media (min-width: 901px) { .steps.steps-row::before { right: calc((100% - 64px) / 5 - 23px); } }
.chips + .note { margin-top: 18px; }

/* ---------- Phone polish (16 Oct) ---------- */
/* Grids never ask for a column wider than the screen */
.panels { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.plain { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.cards { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.cards.compact { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* Footer: groups are always open on wider screens; on phones they fold (site.js closes them) */
.foot-group > summary { list-style: none; cursor: default; pointer-events: none; }
.foot-group > summary::-webkit-details-marker { display: none; }
.foot-contact a { display: block; width: fit-content; }

/* WhatsApp: text badge on wider screens, round icon button on phones */
.wa { display: inline-flex; align-items: center; gap: 10px; }
.wa-icon { width: 22px; height: 22px; flex: none; }
.wa-text span { display: block; }

@media (max-width: 900px) {
  .nav-toggle { min-height: 44px; min-width: 76px; }
  /* the open menu scrolls inside itself, so every link stays reachable on a short screen */
  .js #site-nav.open { max-height: calc(100svh - 76px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  #site-nav > ul > li > a, #site-nav summary { padding: 13px 8px; font-size: 1rem; }
  #site-nav .menu-panel a { padding: 10px 0; }
  #site-nav a.btn { margin-top: 8px; padding: 14px 18px; }
  input, select, textarea { font-size: 16px; } /* 16px stops iPhones zooming in when a field is tapped */
}

@media (max-width: 700px) {
  /* Hero: the buttons sit inside the first screen, clear of the WhatsApp button */
  .hero { padding: clamp(64px, 12svh, 200px) 0 96px; }
  .hero .actions .btn { width: 100%; justify-content: center; text-align: center; }

  .wa { left: auto; right: 14px; bottom: 14px; width: 56px; height: 56px; padding: 0; border-radius: 50%; justify-content: center; box-shadow: 0 10px 28px -8px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
  .wa-icon { width: 28px; height: 28px; }
  .wa-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .consent { left: 12px; right: 12px; bottom: 82px; transform: none; width: auto; padding: 12px 14px; gap: 8px; }
  .consent p { font-size: .88rem; flex-basis: 100%; }
  .consent .btn { flex: 1; min-height: 44px; justify-content: center; }

  /* Links that stand alone get a finger-sized tap area */
  a.more, .note a.more { display: inline-block; padding: 11px 0; }
  .crumbs a { display: inline-block; padding: 10px 0; }
  .related a { display: inline-block; padding: 9px 0; }

  /* Footer as folding groups */
  .site-footer { padding-top: 44px; }
  .foot-cols { grid-template-columns: 1fr; gap: 0; }
  .foot-cols > :first-child { padding-bottom: 18px; }
  .foot-contact a { padding: 10px 0; }
  .foot-group { border-top: 1px solid var(--line); }
  .foot-group:last-child { border-bottom: 1px solid var(--line); }
  .foot-group > summary { pointer-events: auto; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 2px; margin: 0; min-height: 52px; }
  .foot-group > summary::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid var(--sky); border-bottom: 1.5px solid var(--sky); transform: rotate(45deg); transition: transform .25s var(--ease); margin-right: 6px; }
  .foot-group[open] > summary::after { transform: rotate(-135deg); }
  .foot-group[open] { padding-bottom: 12px; }
  .site-footer li { margin: 0; }
  .site-footer .foot-group a { display: block; padding: 11px 2px; }
  .site-footer .menu-title { margin: 14px 0 2px; }
  .legal { margin-top: 24px; padding-bottom: 72px; } /* room for the WhatsApp button */
}
@media (max-width: 700px) {
  table { min-width: 0; } /* two short columns fit a phone; no sideways scrolling */
  th, td { padding: 10px 12px; font-size: .92rem; vertical-align: top; }
}
@media (max-width: 700px) {
  /* keep the whole hero, buttons included, inside the first screen on a typical phone */
  .hero { min-height: min(calc(100svh - 74px), 900px); padding-top: clamp(40px, 7svh, 140px); padding-bottom: 92px; } /* the sticky header takes the first 74 px */
  .hero .wrap::before { width: min(300px, 56vw); margin-bottom: 12px; }
  .hero .eyebrow { margin-bottom: .5em; }
  .hero .lead { margin-bottom: 1.1em; }
  .hero .actions { display: grid; gap: 10px; }
  .hero .actions .btn { margin: 0; padding-top: 13px; padding-bottom: 13px; }
}

/* WhatsApp button in the site's own colours: sky > teal > mint gradient, dark icon and text */
.wa { background: var(--grad-btn) 0 0 / 220% 100%; color: var(--on-blue); border: 1.5px solid rgba(255,255,255,.35); box-shadow: 0 10px 28px -8px var(--teal-glow), 0 0 0 1px rgba(101,208,234,.25); transition: background-position .45s var(--ease), transform .25s var(--ease), box-shadow .25s; }
.wa:hover { color: var(--on-blue); background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 34px -8px var(--teal-glow), 0 0 0 4px rgba(101,208,234,.2); }
.wa-icon { filter: none; }
.wa { flex-direction: row; align-items: center; }

/* WhatsApp: icon only, round, same on every screen */
.wa { left: auto; right: 18px; bottom: 18px; width: 58px; height: 58px; padding: 0; border-radius: 50%; justify-content: center; flex-direction: row; }
.wa-icon { width: 30px; height: 30px; }
@media (max-width: 700px) { .wa { right: 14px; bottom: 14px; width: 56px; height: 56px; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Industries: continuous right-to-left scroll */
.marquee{overflow:hidden;margin:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee-rtl 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .chips{display:flex;flex-wrap:nowrap;gap:10px;margin:0;padding:0 5px;list-style:none}
.marquee .chips li{white-space:nowrap}
@keyframes marquee-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none;overflow:visible}.marquee-track{animation:none;width:auto}.marquee .chips{flex-wrap:wrap}.marquee .chips[aria-hidden]{display:none}}

/* Phones: an open band above the wordmark so the moving network shows before the text starts */
@media (max-width: 700px) {
  .hero { padding-top: clamp(96px, 15svh, 170px); }
}