/* SuperBrand — "Όλα τα χρώματα"
   2026-10-19: softer theme (navy base, Inter + Geologica, rounded cards, smaller headings);
   the overrides are in the "Soft theme" block at the end. 
   Every brand is one colour. On screen the colours add up to white (the white
   SuperBrand logo); on paper they add up to black. RGB for the digital half,
   CMYK for the print half. Geologica (headings) · Inter (text) · Tektur (wordmark only). */

:root {
  --bg: #0f1422;
  --bg-2: #161d2e;
  --bg-3: #1f2739;
  --bg-deep: #0b0f1a;
  --text: #edf0f7;
  --muted: #aeb6c8;
  --line: rgba(255, 255, 255, .09);
  --radius: 16px;
  --radius-sm: 10px;
  --paper: #f2efe7;
  --paper-ink: #121214;
  --paper-muted: #55545c;

  /* one colour per brand */
  --xperiense: #3b82f6;
  --sitemoo: #3fc85c;
  --mediaprint: #00b6c6;
  --beeber: #ffe600;
  --buybuy: #ff2e8b;
  --skyframe: #ec3b31;

  /* screen primaries for the light effect */
  --r: #ff0000;
  --g: #00ff00;
  --b: #0000ff;

  --display: "Geologica", "Segoe UI", Arial, sans-serif;
  --text-f: "Inter", "Segoe UI", Arial, sans-serif;
  --mono: "Inter", "Segoe UI", Arial, sans-serif;   /* small labels: no code font any more */
  --word: "Tektur", "Arial Black", sans-serif;      /* only the big SUPERBRAND wordmark and RGB letters */

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --head: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--head); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.6 var(--text-f);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, ul, ol, dl, dd, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.is-locked { overflow: hidden; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 999; background: #fff; color: #000; padding: .6rem 1rem; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.label { display: flex; align-items: center; gap: .8rem; color: var(--muted); margin-bottom: 1.4rem; }
.label-n { color: var(--text); padding: .2rem .45rem; border: 1px solid var(--line); }
.display {
  font: 800 clamp(2.5rem, 7vw, 6.4rem)/.94 var(--display); letter-spacing: -.015em;
  text-wrap: balance;
}
.row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* brand colour per element (classes, because the CSP allows no inline styles) */
.c-mediaprint { --c: var(--mediaprint); --on: #031417; }
.c-beeber { --c: var(--beeber); --on: #141200; }
.c-buybuy { --c: var(--buybuy); --on: #fff; }
.c-xperiense { --c: var(--xperiense); --on: #fff; }
.c-skyframe { --c: var(--skyframe); --on: #fff; }
.c-text { --c: var(--text); --on: #060608; }   /* SuperBrand: the builder maps var(--text) to c-text */

/* ---------- Buttons: square, with a chromatic split on hover ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: .8rem 1.5rem; border: 1px solid transparent; border-radius: 0;
  font: 600 .9rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: box-shadow .25s var(--ease), background .25s, color .25s, transform .25s var(--ease);
}
.btn:hover { box-shadow: -3px 0 0 var(--r), 3px 0 0 var(--b), 0 3px 0 var(--g); transform: translateY(-1px); }
.btn-light { background: #fff; color: #000; }
.btn-line { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn-line:hover { border-color: #fff; }
.btn-ink { background: var(--paper-ink); color: #fff; }
.btn-ink-line { background: transparent; border-color: var(--paper-ink); color: var(--paper-ink); }
.btn-ink:hover, .btn-ink-line:hover { box-shadow: -3px 0 0 #00aeef, 3px 0 0 #ec008c, 0 3px 0 #fff200; }
.btn-moo { background: var(--sitemoo); color: #06130a; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; }
/* the glass lives on ::before so the open menu (a child) isn't trapped by backdrop-filter */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(6, 6, 8, .72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line); transition: opacity .3s;
}
.site-header.is-stuck::before { opacity: 1; }
.head-in {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); min-height: var(--head);
}
.brand { flex: none; display: block; line-height: 0; margin-right: auto; }
.brand img { height: clamp(22px, 2.2vw, 28px); width: auto; }
.head-nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.head-nav a {
  position: relative; display: inline-flex; align-items: baseline; gap: .4rem;
  font-size: .95rem; text-decoration: none; color: var(--muted); padding: .5rem 0; transition: color .2s; white-space: nowrap;
}
.head-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px;
  background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.head-nav a:hover { color: #fff; }
.head-nav a:hover::after { transform: scaleX(1); }
.nav-n { font: 400 .62rem/1 var(--mono); color: var(--c); }
.head-cta { flex: none; min-height: 42px; padding: .6rem 1.1rem; font-size: .78rem; }

.nav-toggle {
  display: none; flex: none; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .35);
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
}
.bars, .bars::before, .bars::after { display: block; width: 20px; height: 2px; background: #fff; transition: transform .3s var(--ease), background .2s; }
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; background: var(--r); }
.bars::after { top: 6px; background: var(--b); }
.is-open .bars { background: transparent; }
.is-open .bars::before { transform: translateY(6px) rotate(45deg); background: #fff; }
.is-open .bars::after { transform: translateY(-6px) rotate(-45deg); background: #fff; }

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; }
  .head-nav {
    position: fixed; inset: 0; z-index: -1; display: flex; align-items: center;
    padding: calc(var(--head) + 1rem) var(--gutter) 2rem;
    background: var(--bg); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .site-header.is-open .head-nav { opacity: 1; visibility: visible; }
  .head-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .head-nav li { border-bottom: 1px solid var(--line); }
  .head-nav a { display: flex; width: 100%; padding: 1.1rem 0; color: #fff; font: 800 clamp(1.9rem, 8vw, 3rem)/1 var(--display); gap: 1rem; }
  .head-nav a:hover { color: var(--c); }
  .head-nav a::after { display: none; }
  .nav-n { font-size: .8rem; }
}
/* no room for the button beside the logo on a phone; the contact section is one tap away */
@media (max-width: 34rem) { .head-cta { display: none; } }

/* ---------- Crop marks (print) ---------- */
.crop { position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 2; }
.crop::before, .crop::after { content: ""; position: absolute; background: currentColor; opacity: .45; }
.crop::before { width: 100%; height: 1px; }
.crop::after { width: 1px; height: 100%; }
.crop--tl { top: 18px; left: 18px; }
.crop--tr { top: 18px; right: 18px; transform: scaleX(-1); }
.crop--bl { bottom: 18px; left: 18px; transform: scaleY(-1); }
.crop--br { bottom: 18px; right: 18px; transform: scale(-1); }

/* ---------- 1. Hero: R + G + B = white ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh; display: flex;
  padding: calc(var(--head) + 2rem) 0 clamp(1.5rem, 4vh, 3rem);
  background: radial-gradient(ellipse 70% 55% at 50% 52%, #1b1b24 0%, var(--bg) 70%);
}
/* a screen seen up close: red, green and blue sub-pixels */
.subpixels {
  position: absolute; inset: 0; z-index: -1; opacity: .26;
  background:
    repeating-linear-gradient(0deg, var(--bg) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, var(--r) 0 30%, transparent 30% 34%, var(--g) 34% 64%, transparent 64% 68%, var(--b) 68% 98%, transparent 98%);
  background-size: 100% 9px, 9px 100%;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 0%, transparent 75%);
}
.hero-in { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; }
.hero-in .hero-eq { margin-top: auto; }
/* bloom: the white the three channels make, spilling around the word */
.hero::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 90vw; height: 34vw; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .09), transparent); pointer-events: none;
}
.hero-eq { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--muted); margin-bottom: clamp(1rem, 3vh, 2rem); }
.hero-eq .op { color: #fff; }
.dot { width: 9px; height: 9px; display: inline-block; }
.dot-r { background: var(--r); } .dot-g { background: var(--g); } .dot-b { background: var(--b); }

.rgb { position: relative; display: grid; isolation: isolate; }
.rgb .ch {
  grid-area: 1 / 1; mix-blend-mode: screen; will-change: transform;
  transition: transform .5s var(--ease);
}
.rgb .ch-r { color: var(--r); transform: translate(calc(var(--rx, 0) * 1px), calc(var(--ry, 0) * 1px)); }
.rgb .ch-g { color: var(--g); transform: translate(calc(var(--gx, 0) * 1px), calc(var(--gy, 0) * 1px)); }
.rgb .ch-b { color: var(--b); transform: translate(calc(var(--bx, 0) * 1px), calc(var(--by, 0) * 1px)); }
.hero .rgb {
  font: 900 clamp(3rem, 14.6vw, 17rem)/.82 var(--display); letter-spacing: -.035em;
  margin-left: -.04em; user-select: none;
}
.hero .rgb .ch { white-space: nowrap; }
.hero .rgb .ch > span { display: inline; }
.hero .rgb.is-settling .ch { transition: transform 1.8s var(--ease); }
.hero .rgb.is-instant .ch { transition: none; }

.hero-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end;
  margin-top: clamp(1.5rem, 4vh, 2.8rem); padding-top: clamp(1.2rem, 3vh, 2rem); border-top: 1px solid var(--line);
}
.hero-lede { max-width: 38rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--muted); }
.hero-lede strong { color: #fff; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.equation {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem;
  margin-top: clamp(1.4rem, 4vh, 2.6rem); font: 700 clamp(1rem, 1.8vw, 1.45rem)/1.2 var(--display);
}
.equation .eq-sum, .equation .op { color: var(--muted); font-weight: 400; }
.equation a { color: var(--c); text-decoration: none; position: relative; }
.equation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.equation a:hover::after { transform: scaleX(1); }

@media (max-width: 48rem) {
  .hero { align-items: center; padding-top: calc(var(--head) + 1rem); }
  .hero .rgb { font-size: 25.5vw; line-height: .84; }
  .hero .rgb .ch > span { display: block; }
  .hero-foot { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 auto; }
}

/* ---------- 2. Prism + spectrum ---------- */
.prism-sec { padding: clamp(5rem, 12vw, 10rem) 0 0; background: var(--bg); }
.prism-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; }
.prism-head .label { grid-column: 1 / -1; margin-bottom: 0; }
.prism-intro { max-width: 30rem; color: var(--muted); font-size: 1.1rem; }
.beams { display: block; width: 100%; height: clamp(70px, 11vw, 150px); margin-top: clamp(2rem, 5vw, 4rem); }
.prism-glass { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }

.spectrum { display: flex; height: clamp(540px, 74vh, 700px); border-top: 1px solid var(--line); }
.band {
  position: relative; display: flex; flex: 1 1 0; min-width: 0; overflow: hidden;
  background: color-mix(in srgb, var(--c) 13%, var(--bg-2)); color: var(--c);
  border-right: 1px solid rgba(0, 0, 0, .35);
  transition: flex-grow .7s var(--ease), background .4s, color .4s;
}
.band:last-child { border-right: 0; }
.band:hover:not(.is-active) { background: color-mix(in srgb, var(--c) 24%, var(--bg-2)); }
.band.is-active { flex-grow: 6; background: var(--c); color: var(--on); }
.band-h { flex: none; display: flex; font: inherit; }
.band-tab {
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: clamp(76px, 7vw, 104px); padding: 1.6rem 0; border: 0; background: none; cursor: pointer; text-align: left;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.band:not(.is-active) .band-tab { width: 100%; }
.band-n { opacity: .8; }
.band-name { font: 800 clamp(1.6rem, 2.6vw, 2.6rem)/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.band-role { opacity: .75; white-space: nowrap; }
.band.is-active .band-role { display: none; }
.band-panel {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.1rem;
  padding: clamp(1.5rem, 3.4vw, 3.4rem) clamp(1.5rem, 3.4vw, 3.4rem) clamp(1.5rem, 3.4vw, 3.4rem) clamp(.5rem, 1.5vw, 1.5rem);
  animation: panel-in .6s var(--ease) both .15s;
}
/* the brand's name, huge, bleeding off the top of its band */
.band-panel::before {
  content: attr(data-big); position: absolute; top: -.12em; left: clamp(.5rem, 1.5vw, 1.5rem); right: 0;
  font: 900 clamp(5rem, 13vw, 12rem)/1 var(--display); letter-spacing: -.04em; white-space: nowrap;
  color: currentColor; opacity: .12; pointer-events: none;
}
.band-panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.band-kicker { opacity: .8; }
.band-lead { max-width: 34rem; font: 600 clamp(1.3rem, 2.2vw, 2.05rem)/1.15 var(--display); }
.band-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 2rem; max-width: 40rem; }
.band-list li { padding: .55rem 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: 1rem; }
.band-note { font-size: .95rem; opacity: .85; }
.band-link { align-self: flex-start; font: 700 1rem/1 var(--display); text-decoration: none; padding: .9rem 0 .4rem; border-bottom: 2px solid currentColor; }
.band-link:hover { letter-spacing: .02em; }

@media (max-width: 60rem) {
  .prism-head { grid-template-columns: 1fr; }
  .spectrum { flex-direction: column; height: auto; }
  .band, .band.is-active { flex: none; }
  .band { flex-direction: column; border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .35); }
  .band-tab {
    writing-mode: horizontal-tb; transform: none; flex-direction: row; justify-content: flex-start;
    width: 100%; padding: 1.15rem var(--gutter); gap: 1rem;
  }
  .band-h { display: block; }
  .band-name { font-size: 1.7rem; }
  .band-role { margin-left: auto; font-size: .64rem; }
  .band.is-active .band-role { display: inline; }
  .band-panel { padding: .5rem var(--gutter) 2.2rem; }
  .band-panel::before { display: none; }
  .band-list { grid-template-columns: 1fr; }
}
@media (max-width: 26rem) { .band-role { display: none !important; } }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: clamp(1rem, 2vw, 1.6rem) 0; background: var(--bg); }
.ticker-track { display: flex; align-items: center; gap: 2.2rem; width: max-content; animation: ticker 38s linear infinite; }
.ticker span {
  font: 900 clamp(2.6rem, 7vw, 6rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .5);
}
.ticker span:nth-of-type(4n+1) { color: var(--xperiense); -webkit-text-stroke: 0; }
.ticker span:nth-of-type(4n+3) { color: var(--mediaprint); -webkit-text-stroke: 0; }
.ticker i { font-style: normal; font-size: 1.6rem; color: var(--beeber); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- 3. Type index of services ---------- */
.services { padding: clamp(5rem, 11vw, 9rem) 0; }
.services-head { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.index { counter-reset: none; border-bottom: 1px solid var(--line); }
.index li {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: clamp(1rem, 2vw, 1.6rem) 0; border-top: 1px solid var(--line); transition: color .35s var(--ease), padding .35s var(--ease);
}
.index li::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--c);
  transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease);
}
.index li:hover { color: var(--on); padding-left: 1rem; }
.index li:hover::before { transform: scaleY(1); }
.ix-n { color: var(--c); transition: color .35s; }
.index li:hover .ix-n, .index li:hover .ix-by { color: var(--on); }
.ix-word { font: 800 clamp(1.8rem, 5.2vw, 4.8rem)/1.02 var(--display); letter-spacing: -.02em; }
.ix-by { color: var(--muted); text-align: right; transition: color .35s; }
@media (max-width: 48rem) {
  .index li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .ix-by { grid-column: 2; text-align: left; }
}

/* ---------- 3b. Two ways to a website ---------- */
.tiers { padding: 0 0 clamp(5rem, 11vw, 9rem); }
.tiers-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.tier-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; gap: 1.2rem; padding: clamp(1.6rem, 3.5vw, 3rem); }
.tier .btn { align-self: flex-start; margin-top: auto; }
.tier-by { opacity: .8; }
.tier-name { font: 800 clamp(2rem, 4vw, 3.4rem)/1 var(--display); letter-spacing: -.015em; display: flex; align-items: center; gap: .9rem; }
.tier-lead { font-size: 1.12rem; max-width: 34rem; }
.tier-list li { position: relative; padding: .7rem 0 .7rem 1.8rem; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 20%, transparent); }
.tier-list li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: .7rem; height: .7rem; background: currentColor; }
/* Sitemoo: the quick, friendly one */
.tier--moo { background: var(--bg-3); color: var(--text); border-top: 6px solid var(--sitemoo); }
.tier--moo .tier-by, .tier--moo .tier-list li::before { color: var(--sitemoo); }
.tier--moo .tier-list li::before { background: var(--sitemoo); }
/* Signature: white light, the other five brands' colours along its edge */
.tier--sig { background: #fff; color: #08080b; }
.tier--sig::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, var(--xperiense) 0 20%, var(--mediaprint) 0 40%, var(--beeber) 0 60%, var(--buybuy) 0 80%, var(--skyframe) 0);
}
.tier--sig .btn-light { background: #08080b; color: #fff; }
.sig-mark { width: .9em; height: .9em; flex: none; background: conic-gradient(var(--xperiense), var(--beeber), var(--mediaprint), var(--skyframe), var(--buybuy), var(--xperiense)); border-radius: 50%; }
@media (max-width: 52rem) { .tier-grid { grid-template-columns: 1fr; } }

/* ---------- 4. Paper: C + M + Y = K ---------- */
.paper { position: relative; background: var(--paper); color: var(--paper-ink); padding: clamp(5rem, 11vw, 9rem) 0; }
.paper .crop { color: var(--paper-ink); }
.paper .label { color: var(--paper-muted); }
.paper .label-n { color: var(--paper-ink); border-color: rgba(0, 0, 0, .2); }
.paper-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.paper-copy { display: flex; flex-direction: column; gap: 1.5rem; }
.paper-copy .display { font-size: clamp(2.2rem, 5vw, 4.6rem); }
.paper-copy > p { max-width: 36rem; font-size: 1.1rem; color: #2b2a30; }
.materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.materials div { padding: 1rem 0; border-top: 1px solid rgba(0, 0, 0, .15); }
.materials dt { font: 700 1.1rem/1.2 var(--display); margin-bottom: .3rem; }
.materials dd { color: var(--paper-muted); font-size: .96rem; }
.inks { position: relative; aspect-ratio: 1; isolation: isolate; }
.ink {
  position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply;
  transition: transform 1.6s var(--ease);
}
.ink-c { background: #00aeef; left: 21%; top: 6%; }
.ink-m { background: #ec008c; left: 4%; top: 36%; }
.ink-y { background: #fff200; left: 38%; top: 36%; }
/* off register until the section is seen, then the plates lock together */
.js .inks:not(.is-in) .ink-c { transform: translate(-6%, -14%); }
.js .inks:not(.is-in) .ink-m { transform: translate(-14%, 10%); }
.js .inks:not(.is-in) .ink-y { transform: translate(14%, 10%); }
.ink-k { position: absolute; right: 0; bottom: -.5rem; color: var(--paper-muted); }
.reg { position: absolute; top: 0; right: 0; width: 34px; height: 34px; border: 1.5px solid var(--paper-ink); border-radius: 50%; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--paper-ink); }
.reg::before { left: 50%; top: -8px; bottom: -8px; width: 1.5px; transform: translateX(-50%); }
.reg::after { top: 50%; left: -8px; right: -8px; height: 1.5px; transform: translateY(-50%); }
@media (max-width: 52rem) {
  .paper-in { grid-template-columns: 1fr; }
  .inks { max-width: 380px; width: 100%; margin: 0 auto; order: -1; }
  .materials { grid-template-columns: 1fr; }
}

/* ---------- 5. One channel ---------- */
.channel { padding: clamp(5rem, 11vw, 9rem) 0; overflow: hidden; }
.channel-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.channel-copy { display: flex; flex-direction: column; gap: 1.5rem; }
.channel-copy > p { max-width: 36rem; color: var(--muted); font-size: 1.1rem; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.legend li { display: inline-flex; align-items: center; gap: .5rem; font: 600 .95rem/1 var(--display); }
.legend li::before { content: ""; width: 12px; height: 12px; background: var(--c); }
.phone {
  width: min(310px, 78vw); aspect-ratio: 9 / 18.5; padding: 11px; border-radius: 46px; background: #1a1a22;
  transform: rotate(-5deg);
  box-shadow: -14px 0 0 -2px rgba(255, 0, 0, .55), 14px 0 0 -2px rgba(0, 0, 255, .55), 0 14px 0 -2px rgba(0, 255, 0, .4), 0 50px 90px -30px #000;
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { transform: rotate(-3deg) translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .phone { animation: none; } }
.phone-screen { height: 100%; border-radius: 36px; background: #000; overflow: hidden; display: flex; flex-direction: column; }
.phone-bar { display: flex; justify-content: center; padding: 2.2rem 1rem 1rem; border-bottom: 1px solid var(--line); }
.phone-bar img { height: 14px; width: auto; }
.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding-top: 3px; }
.post {
  aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: .45rem; gap: .1rem;
  background: var(--c); color: #000; font-size: .62rem; line-height: 1.1;
}
.post b { font: 800 .66rem/1 var(--display); }
.post:nth-child(even) { background: linear-gradient(135deg, var(--bg-3), #000); color: var(--c); box-shadow: inset 0 -4px 0 var(--c); }
.post:nth-child(even) span { color: #fff; }
@media (max-width: 52rem) {
  .channel-in { grid-template-columns: 1fr; }
  .phone { margin: 1rem auto 0; }
}

/* ---------- 6. The brief ---------- */
.brief { padding: clamp(5rem, 11vw, 9rem) 0; border-top: 1px solid var(--line); }
.brief-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.brief-lede { max-width: 34rem; margin-top: 1.2rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); }
.opt { color: var(--muted); font-weight: 400; font-size: .85em; }

.brief-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 2rem; }
.brief-progress li {
  position: relative; padding-top: 14px; font: 600 .82rem/1.2 var(--display); color: var(--muted);
}
.brief-progress li::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--bg-3); transition: background .4s; }
.brief-progress li span { font: 400 .68rem/1 var(--mono); margin-right: .45rem; }
.brief-progress li.is-current { color: #fff; }
.brief-progress li.is-current::before { background: #fff; }
.brief-progress li.is-done { color: var(--text); cursor: pointer; }
.brief-progress li.is-done::before { background: linear-gradient(90deg, var(--text), var(--mediaprint), var(--beeber), var(--buybuy), var(--xperiense), var(--skyframe)); }
@media (max-width: 40rem) { .brief-progress li { font-size: 0; } .brief-progress li span { font-size: .7rem; } .brief-progress li.is-current { font-size: .8rem; } }

.brief-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.brief-form:not(.is-stepped) .brief-grid { grid-template-columns: 1fr; }
.step { border: 0; padding: 0; margin: 0 0 3rem; min-width: 0; }
.is-stepped .step { margin: 0; animation: step-in .45s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.step-h { display: flex; align-items: baseline; gap: .8rem; padding: 0; font: 800 clamp(1.7rem, 3.4vw, 2.8rem)/1.05 var(--display); letter-spacing: -.01em; }
.step-h:focus { outline: none; }
.step-h + .fields, .step-h + .q { margin-top: 1.6rem; }
.step-n { color: var(--muted); }
.step-hint { color: var(--muted); margin: .6rem 0 1.6rem; }
.step-error { min-height: 1.5em; margin-top: 1rem; color: #ff8a80; font-weight: 700; }

/* step 1: big tiles, each in its brand's colour */
.need-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.need { position: relative; display: block; cursor: pointer; }
.need input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.need-box {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; min-height: 132px;
  padding: 1.1rem 1.1rem 1rem; background: var(--bg-3); border: 1px solid var(--line); overflow: hidden;
  transition: background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease);
}
.need-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); transition: width .35s var(--ease); }
.need-box::after {
  content: ""; position: absolute; top: 1rem; right: 1rem; width: 22px; height: 22px; border: 1.5px solid rgba(255, 255, 255, .4);
  transition: background .2s, border-color .2s;
}
.need-name { position: relative; font: 700 1.15rem/1.15 var(--display); padding-right: 2rem; }
.need-by { position: relative; color: var(--muted); font-size: .66rem; }
.need:hover .need-box { border-color: var(--c); transform: translateY(-2px); }
.need input:checked + .need-box { color: var(--on); border-color: var(--c); }
.need input:checked + .need-box::before { width: 100%; }
.need input:checked + .need-box .need-by { color: var(--on); opacity: .75; }
.need input:checked + .need-box::after { border-color: var(--on); background: var(--on); }
/* the tick, cut from the filled box */
.need-box .tick { position: absolute; top: calc(1rem + 3px); right: calc(1rem + 7px); width: 8px; height: 13px; border: solid var(--c); border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; z-index: 1; transition: opacity .2s; }
.need input:checked + .need-box .tick { opacity: 1; }
@media (max-width: 40rem) {
  .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .need-box { min-height: 112px; padding: .9rem .8rem .8rem; gap: .8rem; }
  .need-name { font-size: 1rem; padding-right: 1.6rem; }
  .need-box::after { top: .8rem; right: .7rem; width: 18px; height: 18px; }
  .need-box .tick { top: calc(.8rem + 2px); right: calc(.7rem + 6px); width: 6px; height: 11px; }
  .need-by { font-size: .58rem; }
}
.need input:focus-visible + .need-box { outline: 2px solid #fff; outline-offset: 3px; }

/* steps 2–4: chips */
.q { margin-bottom: 1.8rem; padding-left: 1rem; border-left: 3px solid var(--c, var(--line)); }
.q-h { font: 700 1.1rem/1.2 var(--display); margin-bottom: .8rem; }
.q-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: .6rem; }
.q-none { color: var(--muted); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem;
  border: 1px solid rgba(255, 255, 255, .28); font-size: .98rem; transition: background .2s, color .2s, border-color .2s;
}
.chip:hover span { border-color: #fff; }
.chip input:checked + span { background: #fff; color: #000; border-color: #fff; box-shadow: -3px 0 0 var(--r), 3px 0 0 var(--b); }
.chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.chip input:disabled + span { opacity: .4; }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; margin-bottom: 1.8rem; }
.field { display: flex; flex-direction: column; gap: .45rem; font: 600 .92rem/1.2 var(--display); }
.field--wide { grid-column: 1 / -1; }
.step > .field { margin-bottom: 1.4rem; }
.field input, .field textarea {
  width: 100%; padding: .85rem 1rem; background: var(--bg-3); border: 1px solid rgba(255, 255, 255, .22); border-radius: 0;
  color: #fff; font: 400 1rem/1.4 var(--text-f); transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: #fff; box-shadow: -3px 0 0 var(--r), 3px 0 0 var(--b); }
.field ::placeholder { color: #6f6e7c; }
@media (max-width: 40rem) { .fields { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: .7rem; align-items: flex-start; margin: .4rem 0 1.4rem; color: var(--muted); font-size: .95rem; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: #fff; flex: none; }
.cf-turnstile { margin-bottom: 1.2rem; min-height: 65px; }
.brief-status { min-height: 1.5em; margin-top: 1rem; font-weight: 700; }
.brief-status[data-kind="error"] { color: #ff8a80; }
.brief-status[data-kind="busy"] { color: var(--muted); }

.step-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.step-nav [data-next] { margin-left: auto; }

/* live summary */
.brief-summary { position: sticky; top: calc(var(--head) + 1rem); padding: 1.4rem; background: var(--bg-2); border: 1px solid var(--line); }
.sum-h { color: var(--muted); margin-bottom: 1rem; }
.sum-light { display: flex; height: 8px; margin-bottom: 1.2rem; background: var(--bg-3); }
.sum-light i { flex: 1; animation: grow .5s var(--ease) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.sum-list li { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 0 .7rem .8rem; border-left: 3px solid var(--c, transparent); border-bottom: 1px solid var(--line); animation: step-in .35s var(--ease) both; }
.sum-list b { font: 700 1rem/1.2 var(--display); }
.sum-list span { color: var(--muted); font-size: .9rem; }
.sum-list .sum-empty, .sum-list .sum-meta { border-left: 0; padding-left: 0; color: var(--muted); font-size: .92rem; }
.sum-by { display: flex; flex-direction: column; gap: .3rem; margin-top: 1rem; font: 700 1rem/1.3 var(--display); }
.sum-by .mono { color: var(--muted); font-weight: 400; }
@media (max-width: 60rem) {
  .brief-grid { grid-template-columns: 1fr; }
  .brief-summary { position: static; order: -1; padding: 1rem 1.1rem; }
  .brief-summary.is-empty { display: none; }
  .sum-list li { padding-block: .45rem; }
}

/* sent */
.brief-done { padding: clamp(2rem, 5vw, 4rem) 0; }
.brief-done:focus { outline: none; }
.done-word { font: 900 clamp(2.6rem, 9vw, 8rem)/.9 var(--display); letter-spacing: -.03em; width: max-content; max-width: 100%; }
.done-word.is-instant .ch { transition: none; }
.done-word .ch { transition: transform 1.4s var(--ease); }
.done-h { font: 800 clamp(1.5rem, 3vw, 2.2rem)/1.1 var(--display); margin: 1.6rem 0 .6rem; }
.done-p { color: var(--muted); font-size: 1.1rem; margin-bottom: 1.6rem; }
@media (max-width: 40rem) { .done-word { font-size: 13vw; } }

/* ---------- Footer ---------- */
.site-footer { background: #000; padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; padding-bottom: 2.5rem; }
.foot-logo { height: clamp(26px, 3vw, 38px); width: auto; flex: none; }
.foot-tag { color: var(--muted); }
.foot-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.foot-brands li { background: #000; }
.foot-brands a {
  display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.4rem 1rem 1.6rem;
  text-decoration: none; border-top: 3px solid var(--c); transition: background .3s;
}
.foot-brands a:hover { background: color-mix(in srgb, var(--c) 16%, #000); }
.foot-brands b { font: 800 1.15rem/1 var(--display); color: var(--c); }
.foot-brands span { font: 400 .78rem/1.2 var(--mono); color: var(--muted); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.6rem 0 2rem; color: var(--muted); }
.foot-base a { text-decoration: none; }
.foot-base a:hover { color: #fff; }
.foot-spectrum { display: flex; height: 10px; }
.foot-spectrum i { flex: 1; background: var(--c); }
@media (max-width: 60rem) { .foot-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .foot-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================================================================
   Inner pages
   ====================================================================== */
.btn-lg { min-height: 60px; padding: 1rem 2rem; font-size: 1rem; }
.btn-ink-on { background: var(--on); color: var(--c); }
.head-nav .nav-cta { display: none; }
@media (max-width: 60rem) {
  .head-nav .nav-cta { display: block; border-bottom: 0; padding-top: 1.6rem; }
  .head-nav .nav-cta a.btn { display: inline-flex; width: auto; padding: .9rem 1.6rem; font: 600 .95rem/1 var(--display); color: #000; }
}
.head-nav a[aria-current="page"] { color: #fff; }
.head-nav a[aria-current="page"]::after { transform: scaleX(1); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem .6rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .6rem; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: #fff; }

.badge {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; text-decoration: none;
  font: 700 .85rem/1 var(--display); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.badge::before { content: ""; width: 9px; height: 9px; background: var(--c); }
.badge:hover { background: var(--c); color: var(--bg); }

/* page head: the service's colour as a bar, its title in big type, a photo where there is one */
.phead { position: relative; padding: calc(var(--head) + clamp(2rem, 5vw, 4rem)) 0 clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); overflow: hidden; }
.phead::before { content: ""; position: absolute; left: 0; right: 0; top: var(--head); height: 6px; background: var(--c); }
.phead-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.phead--plain .phead-in { grid-template-columns: minmax(0, 1fr); }
.phead-copy { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.phead-h { font: 900 clamp(2.8rem, 8vw, 7.5rem)/.9 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.phead--plain .phead-h { font-size: clamp(3rem, 11vw, 10rem); }
.phead-lede { max-width: 38rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--muted); }
.phead-by { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.phead-by .mono { color: var(--muted); margin-right: .2rem; }
.phead-fig { position: relative; margin: 0; color: #fff; }
.phead-fig img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; box-shadow: -10px 0 0 -2px color-mix(in srgb, var(--c) 70%, transparent), 0 40px 80px -40px #000; }
.phead-fig .crop--tl { top: -14px; left: -14px; } .phead-fig .crop--br { bottom: -14px; right: -14px; }
.phead-type { display: grid; justify-items: end; font: 900 clamp(5rem, 16vw, 15rem)/.85 var(--display); letter-spacing: -.05em; user-select: none; }
.phead-type .ch { grid-area: 1 / 1; mix-blend-mode: screen; opacity: .9; }
.phead-type .ch-r { color: var(--r); transform: translate(-6px, -2px); }
.phead-type .ch-g { color: var(--g); transform: translate(0, 3px); }
.phead-type .ch-b { color: var(--b); transform: translate(6px, -2px); }
@media (max-width: 60rem) {
  .phead-in { grid-template-columns: 1fr; }
  .phead-type { display: none; }
  .phead--photo .phead-fig { order: -1; }
}

.sec-h { font: 800 clamp(1.8rem, 3.6vw, 3rem)/1 var(--display); letter-spacing: -.01em; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.offers { padding: clamp(4rem, 8vw, 7rem) 0; }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.offer-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offer.span-2 { grid-column: span 2; } .offer.span-3 { grid-column: span 3; }
@media (max-width: 64rem) {
  .offer-grid, .offer-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer.span-2, .offer.span-3 { grid-column: auto; }
  .offer:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 40rem) {
  .offer-grid, .offer-grid--4 { grid-template-columns: 1fr; }
  .offer:last-child:nth-child(odd) { grid-column: auto; }
}
.offer { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.4rem, 2.5vw, 2rem); background: var(--bg); transition: background .3s; }
.offer::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--c, #fff); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.offer:hover { background: var(--bg-2); }
.offer:hover::before { transform: scaleX(1); }
.offer-n { color: var(--muted); }
.offer h3 { font: 700 1.3rem/1.15 var(--display); }
.offer p { color: var(--muted); }
main > section[style*="--c"] ~ .offers .offer::before { background: var(--c); }

.split { padding: clamp(4rem, 8vw, 7rem) 0 0; }
.split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.split-col { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.6rem, 3.5vw, 3rem); background: var(--c); color: var(--on); }
.split-col h3 { font: 800 clamp(1.8rem, 3.4vw, 2.8rem)/1 var(--display); }
.split-col .chips li { border-color: color-mix(in srgb, var(--on) 35%, transparent); }
.split-col .btn { align-self: flex-start; margin-top: auto; }
.split-by { opacity: .75; }
@media (max-width: 52rem) { .split-grid { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: .5rem .9rem; border: 1px solid rgba(255, 255, 255, .25); font-size: .98rem; }
.chips--big li { font: 600 clamp(1rem, 1.6vw, 1.25rem)/1.2 var(--display); padding: .8rem 1.2rem; }
.uses { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.uses-in .sec-h { margin-bottom: 1.2rem; }

.process { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.steps li { position: relative; padding: 1.6rem 1.4rem 0 0; border-top: 3px solid var(--line); }
.steps li::before { content: ""; position: absolute; left: 0; top: -3px; height: 3px; width: 40%; background: var(--skyframe); }
.steps li .mono { color: var(--muted); }
.steps h3 { font: 700 1.3rem/1.1 var(--display); margin: .5rem 0; }
.steps p { color: var(--muted); }
@media (max-width: 52rem) { .steps { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } }

.gallery-sec { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-grid figcaption, .work figcaption { margin-top: .5rem; font-size: .9rem; color: var(--muted); }
@media (max-width: 52rem) { .photo-grid { grid-template-columns: 1fr 1fr; } }

.note { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.note-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; padding: 1.6rem; border: 1px solid var(--line); background: var(--bg-2); }
.note-in .mono { color: var(--beeber); }
.note-p { font-size: 1.05rem; }
@media (max-width: 52rem) { .note-in { grid-template-columns: 1fr; } .note-in .btn { justify-self: start; } }

.cta-band { position: relative; padding: clamp(3.5rem, 7vw, 6rem) 0; background: #fff; color: #060608; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, #060608 0 16.66%, var(--mediaprint) 0 33.33%, var(--beeber) 0 50%, var(--buybuy) 0 66.66%, var(--xperiense) 0 83.33%, var(--skyframe) 0);
}
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cta-text { max-width: 44rem; font: 800 clamp(1.6rem, 3.6vw, 3rem)/1.05 var(--display); letter-spacing: -.01em; }
.cta-band .btn-light { background: #060608; color: #fff; }

.related { padding: clamp(4rem, 8vw, 6rem) 0; }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rel { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem; background: var(--bg-2); border-top: 4px solid var(--c); text-decoration: none; transition: background .3s, transform .3s var(--ease); }
.rel:hover { background: color-mix(in srgb, var(--c) 14%, var(--bg-2)); transform: translateY(-3px); }
.rel .mono { color: var(--muted); font-size: .64rem; }
.rel b { font: 800 1.5rem/1.05 var(--display); }
.rel span:last-child { color: var(--muted); }
@media (max-width: 52rem) { .rel-grid { grid-template-columns: 1fr; } }

/* services as links (home index, hub) */
.index--links li { display: block; padding: 0; }
.index--links li:hover { padding-left: 0; }
.index--links a {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem) 0; text-decoration: none; color: inherit; transition: padding .35s var(--ease);
}
.index--links li:hover a, .index--links a:focus-visible { padding-left: 1rem; }
.index--hub a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.ix-short { color: var(--muted); transition: color .35s; }
.index li:hover .ix-short { color: var(--on); }
@media (max-width: 48rem) {
  .index--links a { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .index--hub a { grid-template-columns: 1fr; gap: .3rem; }
  .ix-by, .ix-short { grid-column: auto; }
  .index--links .ix-by { grid-column: 2; }
  .index--hub .ix-by { grid-column: 1; text-align: left; }
}
/* services hub: a jump bar to the three groups, then one card per service */
.phead--hub { padding-bottom: clamp(2rem, 4vw, 3rem); }
.phead--hub .phead-h { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.hub-jump { position: sticky; top: var(--head); z-index: 50; background: rgba(6, 6, 8, .94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hub-jump ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0; }
.hub-jump a {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--line); background: var(--bg-2); text-decoration: none; font: 600 1rem/1 var(--display); transition: border-color .25s, background .25s;
}
.hub-jump a::before { content: ""; width: 9px; height: 9px; background: var(--c); flex: none; }
.hub-jump a:hover, .hub-jump a:focus-visible { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--bg-2)); }
.hj-n { font: 400 .8rem/1 var(--mono); color: var(--muted); }
.hub-group { padding: clamp(2.5rem, 5vw, 4rem) 0 0; scroll-margin-top: calc(var(--head) + 70px); }
.hub-group:last-of-type { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.hub-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 2rem; margin-bottom: 1.25rem; }
.hub-h h2 { font: 800 clamp(1.7rem, 3vw, 2.3rem)/1.1 var(--display); }
.hub-h p { color: var(--muted); }
.hub-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hc a {
  display: flex; height: 100%; text-decoration: none; background: var(--bg-2);
  border: 1px solid var(--line); border-top: 3px solid var(--c); transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.hc a:hover, .hc a:focus-visible { background: color-mix(in srgb, var(--c) 9%, var(--bg-2)); border-color: color-mix(in srgb, var(--c) 55%, transparent); border-top-color: var(--c); transform: translateY(-2px); }
.hc-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 1.4rem 1.4rem 1.2rem; }
.hc-ico { display: grid; place-items: center; width: 48px; height: 48px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.hc-ico svg { width: 26px; height: 26px; }
.hc-t { margin: 1rem 0 .7rem; font: 700 1.45rem/1.15 var(--display); }
.hc-items { display: flex; flex-wrap: wrap; gap: .4rem; }
.hc-items li { padding: .25rem .6rem; background: var(--bg-3); color: #d6d5df; font-size: .92rem; line-height: 1.35; }
.hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.3rem; }
.hc-foot .mono { color: var(--muted); font-size: .66rem; }
.hc-go { font: 600 .95rem/1 var(--display); white-space: nowrap; }
.hc-go span { display: inline-block; transition: transform .25s var(--ease); }
.hc a:hover .hc-go span { transform: translateX(4px); }
.hc--wide { grid-column: 1 / -1; }
.hc-fig { flex: 1 1 50%; min-width: 0; }
.hc-fig img { width: 100%; height: 100%; min-height: 240px; max-height: 360px; object-fit: cover; }
.hc--wide .hc-body { flex-basis: 50%; padding: clamp(1.4rem, 3vw, 2.4rem); }
@media (max-width: 60rem) { .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) {
  .hub-cards { grid-template-columns: 1fr; }
  .hc-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .9rem; padding: 1.1rem 1.1rem 1rem; }
  .hc-ico { width: 42px; height: 42px; }
  .hc-t { margin: 0; font-size: 1.3rem; }
  .hc-items, .hc-foot { grid-column: 1 / -1; }
  .hc-items { margin-top: .8rem; }
  .hc-foot { padding-top: 1rem; }
  .hc--wide a { flex-direction: column; }
  .hc-fig img { min-height: 0; aspect-ratio: 16 / 9; }
  .hub-jump ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: .6rem 0; }
  .hub-jump a { justify-content: center; padding: .5rem .3rem; font-size: .88rem; border-bottom: 3px solid var(--c); }
  .hub-jump a::before, .hj-n { display: none; }
}

/* brands page */
.bgrid-sec { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.5vw, 1.2rem); }
.bcard { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.6rem, 3.5vw, 3rem); background: var(--c); color: var(--on); scroll-margin-top: calc(var(--head) + 1rem); }
.bcard-top { display: flex; justify-content: space-between; gap: 1rem; opacity: .8; }
.bcard-name { font: 900 clamp(2.6rem, 6vw, 5rem)/.9 var(--display); letter-spacing: -.03em; }
.bcard-desc { font-size: 1.08rem; max-width: 34rem; }
.bcard-svc { display: grid; gap: 0; }
.bcard-svc a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); text-decoration: none; font: 700 1.05rem/1.2 var(--display); }
.bcard-svc a:hover { padding-left: .4rem; }
.bcard .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 52rem) { .bgrid { grid-template-columns: 1fr; } }

/* portfolio */
.work-sec { padding: clamp(3.5rem, 7vw, 6rem) 0 0; }
.work-sec:last-of-type { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.work { margin: 0; }
.work img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 4px solid var(--c); }
.work figcaption a { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--text); font: 700 1.05rem/1.2 var(--display); }
.work figcaption .mono { color: var(--muted); font-weight: 400; }
@media (max-width: 52rem) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .work-grid { grid-template-columns: 1fr; } }

/* home: drones band */
.sky { position: relative; isolation: isolate; min-height: clamp(460px, 80vh, 760px); display: flex; align-items: flex-end; overflow: hidden; }
.sky-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sky::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 6, 8, 0) 15%, rgba(6, 6, 8, .55) 45%, rgba(6, 6, 8, .9) 100%); }
.sky-in { display: flex; flex-direction: column; gap: 1.2rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.sky-in .label, .sky-in .label-n { color: #fff; border-color: rgba(255, 255, 255, .5); }
.sky-in p:not(.label) { max-width: 34rem; font-size: 1.15rem; }
.sky-in .btn { align-self: flex-start; }
.paper-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.paper-links a { display: flex; justify-content: space-between; padding: .9rem 0; border-top: 1px solid rgba(0, 0, 0, .15); text-decoration: none; font: 700 1.1rem/1.2 var(--display); }
.paper-links a:hover { padding-left: .4rem; }
@media (max-width: 40rem) { .paper-links { grid-template-columns: 1fr; } }

/* footer columns */
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--line); }
.foot-h { color: var(--muted); margin-bottom: .8rem; }
.foot-col li { padding: .25rem 0; }
.foot-col a { text-decoration: none; color: var(--text); }
.foot-col a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 64rem) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 52rem) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* the request page has no section heading above the form */
.brief--page { border-top: 0; padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .rgb .ch, .ink, .band, .band-panel { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .ticker, .phone, .beams { display: none !important; }
  body { background: #fff; color: #000; }
}

/* the request page: a smaller head so the form starts on the first screen */
.phead--req { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.phead--req .phead-h { font-size: clamp(2.4rem, 6vw, 5rem); }
.btn-lg { white-space: normal; text-align: center; max-width: 100%; }
.brief-steps { min-width: 0; overflow-x: clip; }
.chips li { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .steps { grid-template-columns: 1fr; } }

/* ======================================================================
   Soft theme (2026-10-19): easier on the eyes. Navy instead of black,
   soft colour glows, a clean sans, normal-sized headings, rounded cards.
   ====================================================================== */
body { line-height: 1.65; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 8% 0%, rgba(59, 130, 246, .13), transparent 70%),
    radial-gradient(50vw 50vh at 100% 35%, rgba(0, 182, 198, .08), transparent 70%),
    radial-gradient(60vw 50vh at 30% 100%, rgba(255, 46, 139, .07), transparent 70%);
}
.mono { font-family: var(--mono); font-weight: 600; font-size: .74rem; letter-spacing: .05em; }
.label-n { border-radius: 6px; }
.display { font: 800 clamp(2rem, 4.2vw, 3.4rem)/1.1 var(--display); letter-spacing: -.02em; }
.sec-h { font: 800 clamp(1.6rem, 3vw, 2.4rem)/1.15 var(--display); letter-spacing: -.015em; }

/* buttons: rounded, sentence case, a soft lift instead of the RGB split */
.btn { border-radius: var(--radius-sm); font: 600 .98rem/1 var(--text-f); letter-spacing: 0; text-transform: none; min-height: 48px; padding: .8rem 1.4rem; }
.btn:hover, .btn-ink:hover, .btn-ink-line:hover { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6), 0 0 0 3px rgba(255, 255, 255, .1); }
.btn-line { border-color: rgba(255, 255, 255, .28); }
.btn-lg { min-height: 54px; font-size: 1.02rem; }
.head-cta { font-size: .9rem; min-height: 42px; }

/* header */
.site-header::before { background: rgba(15, 20, 34, .82); }
.head-nav a { font-size: 1rem; }
.nav-n { display: none; }
.nav-toggle { border-radius: var(--radius-sm); border-color: rgba(255, 255, 255, .25); }
@media (max-width: 60rem) {
  .head-nav a { font: 700 1.5rem/1.2 var(--display); }
  .head-nav .nav-cta a.btn { font: 600 1rem/1 var(--text-f); }
}

/* home hero: the wordmark keeps its block type; the light around it is coloured, not grey */
.hero { background:
  radial-gradient(ellipse 55% 45% at 25% 40%, rgba(59, 130, 246, .2), transparent 70%),
  radial-gradient(ellipse 45% 40% at 80% 60%, rgba(255, 46, 139, .13), transparent 70%),
  radial-gradient(ellipse 40% 35% at 55% 25%, rgba(0, 182, 198, .12), transparent 70%), var(--bg); }
.hero .rgb, .phead-type, .done-word { font-family: var(--word); }
.hero .rgb { font-size: clamp(3rem, 12vw, 13rem); }
.hero-lede { line-height: 1.6; }
.equation { font-family: var(--display); }

/* spectrum, ticker, index: calmer sizes */
.band-name { font-size: clamp(1.4rem, 2.1vw, 2rem); }
.band-panel::before { opacity: .07; }
.band-lead { font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.3; }
.ticker span { font-size: clamp(1.8rem, 4vw, 3.2rem); -webkit-text-stroke-color: rgba(255, 255, 255, .35); }
.ix-word { font-size: clamp(1.35rem, 2.6vw, 2.2rem); letter-spacing: -.01em; }
.index li { padding: clamp(.8rem, 1.4vw, 1.1rem) 0; }
.tier { border-radius: var(--radius); overflow: hidden; }
.tier-name { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* page heads */
.phead::before { height: 4px; }
.phead-h, .phead--plain .phead-h { font: 800 clamp(2.2rem, 5vw, 3.8rem)/1.08 var(--display); letter-spacing: -.02em; }
.phead-fig img { border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.phead-fig .crop { display: none; }
.phead-type { font-size: clamp(4rem, 11vw, 10rem); }
.badge { border-radius: 999px; font: 600 .85rem/1 var(--text-f); }
.badge::before { border-radius: 50%; }

/* cards everywhere: rounded panels with gaps instead of hairline grids */
.offer-grid { gap: 12px; background: none; border: 0; }
.offer { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.offer:hover { background: var(--bg-3); }
.offer h3 { font-size: 1.2rem; }
.split-col { border-radius: var(--radius); }
.split-col h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.chips li { border-radius: 999px; border-color: rgba(255, 255, 255, .18); }
.photo-grid img, .work img { border-radius: 12px; }
.note-in { border-radius: var(--radius); }
.rel { border-radius: var(--radius); overflow: hidden; }
.rel b { font-size: 1.25rem; }
.bcard { border-radius: 20px; }
.bcard-name { font-size: clamp(2rem, 4vw, 3.2rem); }
.steps h3 { font-size: 1.15rem; }

/* call-to-action band: a soft coloured panel instead of a white slab */
.cta-band { background: linear-gradient(120deg, #1c2a4f 0%, #24204a 55%, #2d1d43 100%); color: var(--text); }
.cta-band::before { background: linear-gradient(90deg, var(--text) 0 16.66%, var(--mediaprint) 0 33.33%, var(--beeber) 0 50%, var(--buybuy) 0 66.66%, var(--xperiense) 0 83.33%, var(--skyframe) 0); }
.cta-text { font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.15; }
.cta-band .btn-light { background: #fff; color: #0f1422; }

/* services hub */
.hub-jump { background: rgba(15, 20, 34, .9); }
.hub-jump a { border-radius: 999px; font-family: var(--text-f); }
.hub-jump a::before { border-radius: 50%; }
.hc a { border-radius: var(--radius); overflow: hidden; }
.hc-ico { border-radius: 12px; }
.hc-items li { border-radius: 999px; }
.hc-t { font-size: 1.3rem; }
.hc-go { font-family: var(--text-f); }

/* request form */
.step-h { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.need-box { border-radius: 14px; }
.need-box::after { border-radius: 6px; }
.chip span { border-radius: 999px; }
.chip input:checked + span { box-shadow: none; }
.field input, .field textarea { border-radius: var(--radius-sm); border-color: rgba(255, 255, 255, .16); }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, .35); border-color: var(--xperiense); }
.brief-summary { border-radius: var(--radius); }
.brief-progress li::before { border-radius: 4px; }

/* home drones band and footer: navy, not black */
.sky::after { background: linear-gradient(180deg, rgba(15, 20, 34, 0) 15%, rgba(15, 20, 34, .55) 45%, rgba(15, 20, 34, .92) 100%); }
.site-footer, .foot-brands li { background: var(--bg-deep); }
.foot-brands a:hover { background: color-mix(in srgb, var(--c) 14%, var(--bg-deep)); }
.foot-brands b { font-size: 1.05rem; }
.foot-brands span { font-family: var(--text-f); }
.subpixels { opacity: .14; }

@media (max-width: 38rem) {
  .hub-jump a { width: 100%; border-bottom-width: 1px; gap: .4rem; }
  .hub-jump a::before { display: block; width: 7px; height: 7px; }
}

/* ======================================================================
   Cards (2026-10-19): lighter panels that stand apart from the navy page
   and from each other; no coloured top/bottom lines anywhere.
   ====================================================================== */
:root { --card: #222b40; --card-hi: #2a3550; --card-line: rgba(255, 255, 255, .09); --card-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 30px -18px rgba(0, 0, 0, .75); }

/* services hub */
.hub-cards { gap: 16px; }
.hc a, .hc a:hover, .hc a:focus-visible { border: 1px solid var(--card-line); border-top: 1px solid var(--card-line); }
.hc a { background: var(--card); box-shadow: var(--card-shadow); }
.hc a:hover, .hc a:focus-visible { background: var(--card-hi); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.hc-ico { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hc-items li { background: rgba(255, 255, 255, .07); color: #e2e6ef; }
.hc-foot .mono { display: inline-flex; align-items: center; gap: .45rem; color: #c3cad8; }
.hc-foot .mono::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }

/* other cards */
.offer, .rel, .note-in, .brief-summary { background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); }
.offer:hover, .rel:hover { background: var(--card-hi); }
.offer::before { display: none; }
.rel { border-top: 1px solid var(--card-line); gap: .4rem; }
.rel:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.rel-grid, .offer-grid { gap: 16px; }
.need-box { background: var(--card); border-color: var(--card-line); box-shadow: var(--card-shadow); }
.need-box::before { width: 0; }                                  /* fills only when chosen */
.need input:checked + .need-box::before { width: 100%; }
.tier--moo { background: var(--card); border-top: 0; }

/* lines removed */
.phead::before { display: none; }
.foot-brands a { border-top: 0; }
.foot-brands b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .5rem; border-radius: 50%; background: var(--c); vertical-align: .15em; }
.tier--sig::before { display: none; }
.work img { border-bottom: 0; }
.steps li { border-top: 0; padding-top: 0; }
.steps li::before { display: none; }

/* services hub, livelier (2026-10-19): bolder card titles, a soft brand glow per card */
.hc a { background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--c) 17%, transparent), transparent 58%), var(--card); }
.hc a:hover, .hc a:focus-visible { background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 62%), var(--card-hi); }
.hc-ico { width: 54px; height: 54px; border-radius: 14px; }
.hc-ico svg { width: 28px; height: 28px; }
.hc-t { margin: 1.1rem 0 .8rem; font: 800 1.6rem/1.15 var(--display); letter-spacing: -.015em; color: #fff; }
.hc--wide .hc-t { font-size: 1.9rem; }
@media (max-width: 38rem) {
  .hc-ico { width: 46px; height: 46px; }
  .hc-t { margin: 0; font-size: 1.4rem; }
}

/* whatever comes last before the request band gets room to breathe (2026-10-19) */
main > section:has(+ .cta-band) { padding-bottom: clamp(4rem, 8vw, 6.5rem); }

/* services hub details (2026-10-19): group badge + count, a faint glow per group, gradient icon tiles, round arrow */
.hub-group { position: relative; isolation: isolate; }
.hub-group::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: min(70vw, 900px); height: 480px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 11%, transparent), transparent);
  transform: translate(-25%, -20%);
}
.hub-h h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -.02em; }
.hub-gi { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--c);
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.hub-gi svg { width: 26px; height: 26px; }
.hub-count { padding: .35rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); font: 500 .85rem/1 var(--text-f); letter-spacing: 0; }

.hc-ico { background: linear-gradient(145deg, color-mix(in srgb, var(--c) 32%, transparent), color-mix(in srgb, var(--c) 9%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.hc-t { font-weight: 700; letter-spacing: -.02em; }
.hc-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255, 255, 255, .18); color: #fff; transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease); }
.hc-go svg { width: 18px; height: 18px; }
.hc a:hover .hc-go, .hc a:focus-visible .hc-go { background: var(--c); border-color: var(--c); color: var(--on); transform: translateX(3px); }
.hc a:hover .hc-go span { transform: none; }

/* Έργα (2026-10-19): filter buttons + project cards (screenshot, title, excerpt, link) */
.pf-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.pf {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1.1rem; cursor: pointer;
  border: 1px solid var(--card-line); border-radius: 999px; background: var(--card); color: var(--text);
  font: 600 .98rem/1 var(--text-f); transition: background .2s, border-color .2s, color .2s;
}
.pf:hover { border-color: rgba(255, 255, 255, .3); }
.pf[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0f1422; }
.pf-n { font-weight: 500; font-size: .82rem; opacity: .65; }
.pj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pj a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--card-shadow);
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.pj a:hover, .pj a:focus-visible { background: var(--card-hi); border-color: rgba(255, 255, 255, .2); transform: translateY(-3px); }
.pj-shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); }
.pj-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.pj a:hover .pj-shot img { transform: scale(1.03); }
.pj-body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: 1.2rem 1.3rem 1.3rem; }
.pj-cat { align-self: flex-start; padding: .3rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d6dbe6; font: 600 .78rem/1 var(--text-f); }
.pj-t { font: 700 1.35rem/1.2 var(--display); letter-spacing: -.015em; color: #fff; }
.pj-ex { color: var(--muted); }
.pj-link { margin-top: auto; padding-top: .6rem; color: #fff; font-weight: 600; font-size: .95rem; }
.pj-empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed rgba(255, 255, 255, .16); border-radius: var(--radius); }
@media (max-width: 60rem) { .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .pj-grid { grid-template-columns: 1fr; } }

/* footer: SuperBrand's details where the repeated request button was (2026-10-20) */
.foot-top { align-items: center; }
.foot-contact { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-style: normal; }
.foot-contact a { color: var(--text); text-decoration: none; font-weight: 500; }
.foot-contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* contact page */
.ct-sec { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ct {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: clamp(1.4rem, 2.5vw, 2rem);
  background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 58%), var(--card);
  border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--card-shadow);
}
.ct-ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: .6rem; border-radius: 14px; color: var(--c);
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 32%, transparent), color-mix(in srgb, var(--c) 9%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.ct-ico svg { width: 28px; height: 28px; }
.ct-h { color: var(--muted); font: 600 .95rem/1.2 var(--text-f); }
.ct-big { color: #fff; text-decoration: none; font: 700 clamp(1.25rem, 2vw, 1.55rem)/1.3 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
a.ct-big:hover { text-decoration: underline; text-underline-offset: 4px; }
.ct-map { margin-top: auto; padding-top: .8rem; color: var(--text); font-weight: 600; text-decoration: none; }
.ct-map:hover { text-decoration: underline; }
@media (max-width: 52rem) { .ct-grid { grid-template-columns: 1fr; } }
.ct-note { padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d6dbe6; font: 600 .85rem/1.2 var(--text-f); }

/* contact page: the short message form (2026-10-20) */
.msg-sec { padding: clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 8vw, 6rem); }
.msg-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.msg-copy p { color: var(--muted); max-width: 26rem; }
.msg-copy a { color: var(--text); }
.msg-form { padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.msg-form .fields { margin-bottom: 1.2rem; }
.brief-status[data-kind="ok"] { color: #7ee2a8; }
.msg-noscript { margin-top: 1rem; color: var(--muted); }
@media (max-width: 52rem) { .msg-in { grid-template-columns: 1fr; } }

/* home, 2026-10-20: no print corner marks on phones; the wordmark fills a phone's width again
   (the soft-theme clamp above had shrunk it) */
@media (max-width: 48rem) {
  .crop { display: none; }
  .hero .rgb { font-size: 27vw; line-height: .84; }
}

/* home «Τι φτιάχνουμε» on desktop: the phone list, in three columns that read downwards */
@media (min-width: 60rem) {
  .services .index--links {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto);   /* 15 services: 5 per column */
    column-gap: clamp(1.5rem, 3vw, 3rem); border-bottom: 0;
  }
  .services .index--links li { padding: 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .services .index--links li:hover { padding-left: 0; }
  .services .index--links li::before { inset: 0 -.8rem; border-radius: 12px; }
  .services .index--links a { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .15rem 1rem; padding: 1.05rem 0; }
  .services .index--links li:hover a, .services .index--links a:focus-visible { padding-left: .6rem; }
  .services .ix-word { font-size: clamp(1.25rem, 1.7vw, 1.6rem); }
  .services .index--links .ix-by { grid-column: 2; text-align: left; font-size: .68rem; }
}

/* Έργα: "more coming" panel after the grid (2026-10-20) */
.pj-soon {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 18px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2.5rem;
  padding: clamp(1.6rem, 3.5vw, 2.6rem); border-radius: var(--radius);
  background: var(--card); border: 1px dashed rgba(255, 255, 255, .2); box-shadow: var(--card-shadow);
}
/* a slow glow drifting across, in the brand colours */
.pj-soon::before {
  content: ""; position: absolute; z-index: -1; top: -60%; left: -30%; width: 60%; height: 220%;
  background: radial-gradient(closest-side, rgba(59, 130, 246, .22), rgba(255, 46, 139, .12) 55%, transparent);
  animation: soon-drift 9s ease-in-out infinite alternate;
}
@keyframes soon-drift { to { transform: translateX(170%); } }
.soon-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .7rem; font: 700 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 var(--display); letter-spacing: -.015em; color: #fff; }
.soon-p { margin-top: .4rem; color: var(--muted); }
.soon-dots { display: inline-flex; gap: 6px; }
.soon-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--xperiense); animation: soon-dot 1.4s ease-in-out infinite; }
.soon-dots i:nth-child(2) { background: var(--buybuy); animation-delay: .18s; }
.soon-dots i:nth-child(3) { background: var(--mediaprint); animation-delay: .36s; }
@keyframes soon-dot { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-7px); opacity: 1; } }
.soon-cats { display: flex; flex-wrap: wrap; gap: .6rem; }
.soon-cats li {
  display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1rem .45rem .45rem; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font: 600 1rem/1 var(--text-f); color: #fff;
}
.soon-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent); }
.soon-ico svg { width: 19px; height: 19px; }
@media (prefers-reduced-motion: reduce) {
  .pj-soon::before, .soon-dots i { animation: none; }
  .soon-dots i { opacity: .8; }
}