/* Times Printers - shared design system */
/* Linked by every page. Tokens in :root; components below. */

:root {
  /* brand colour */
  --indigo: #1E23AC;
  --teal: #23DFBC;
  --cyan: #00C1D5;
  --orange: #FAA61A;
  --navy: #0B1147;
  --footer-bg: #080c38;
  --ink: #171a31;
  --ink-soft: #52566f;
  --white: #fff;
  --mist: #E4E8F2;  /* faint neutral: fills and hairline borders */
  --danger: #ff5a4d;  /* form-error border/highlight */
  --bronze: #D79A6C;  /* bronze award medal (gold medal = --orange, silver = --mist) */
  --teal-ink: #06251d;  /* dark text on teal sections; use opacity for lighter tones */
  /* width tokens (one source of truth for content columns) */
  --maxw: 1180px;  /* page content width            */
  --w-content: 760px;  /* WIDE heading column */
  --w-measure: 600px;  /* DEFAULT column — every other section. Fixed px (not ch) so it never diverges by font. */
  /* fluid type scale */
  --fs-display: clamp(3rem,9vw,6.6rem);  /* homepage splash hero */
  --fs-h1: clamp(2.4rem,4.8vw,3.4rem);  /* page-header heroes (service / connect / about / legal / error) */
  --fs-h2: clamp(2.1rem,4.3vw,3.2rem);  /* section titles */
  --fs-stat: clamp(2.4rem,5vw,3.8rem);  /* large stat numbers */
  --fs-h3: clamp(1.5rem,3.4vw,2.2rem);  /* card titles, pull-quotes, timeline years */
  --fs-sub: clamp(1.1rem,2.4vw,1.5rem);  /* hero subs, subheads, statement text */
  --fs-h4: 1.15rem;  /* small card headings, sub-labels */
  --fs-lede: 1.07rem;  /* intro paragraphs */
  --fs-body: 1rem;  /* body copy */
  --fs-sm: .95rem;  /* secondary text, meta */
  --fs-xs: .84rem;  /* captions, form labels */
  --fs-2xs: .74rem;  /* eyebrows, tiny labels */
  --fs-icon: 1.5rem;  /* glyph markers: faq +/−, slider ‹ › arrows */
  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--footer-bg);
}  /* overflow clip (not hidden) keeps sticky working; background = footer colour for overscroll */
body {
  font-family: "Roboto",sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1,
h2,
h3,
h4 {
  font-family: "Poppins",sans-serif;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.section {
  padding: clamp(70px,9vw,128px) 0;
  position: relative;
}
.section-dark {
  background: var(--navy);
  color: var(--white);
}
.section-dark h2,
.section-dark h3 {
  color: var(--white);
}
/* sticky-stacking sections */
body > section,
body > footer {
  isolation: isolate;
}  /* contain z-index per section */
.stk {
  box-shadow: 0 -24px 48px -26px rgba(8,12,38,.4);
}  /* leading-edge shadow */
section.pin {
  position: sticky;
  top: 0;
}  /* pin to top (fold-in stacking) */
section.pin.pin-off {
  position: relative;
  top: auto;
}  /* JS unpins any .pin section taller than the viewport */
.section.stk:not(.section-dark):not(.midcta):not(.contact-teal) {
  background: var(--white);
}  /* opaque-fill light sections */
/* light-section watermark */
.wm {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: inset(0);
}
.wm::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("assets/tp-mark-watermark.png") no-repeat calc(100% + 230px) center/auto 760px;
  opacity: .16;
}
/* brand watermark (page-level fixed layer; visible in the overscroll gap) */
.brand-watermark {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("assets/tp-mark-watermark.png") no-repeat calc(100% + 230px) center/auto 760px;
  opacity: .16;
}
/* stats section */
.eyebrow {
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-block;
  margin-bottom: 18px;
}
.section:not(.section-dark) .eyebrow {
  color: var(--indigo);
}
h2.title {
  font-size: var(--fs-h2);
}  /* section titles */
.page-partner h2.title {
  font-size: var(--fs-h3);
}  /* Partnership page only: section titles step down a tier under the hero */
.lede {
  font-size: var(--fs-lede);
  color: var(--ink-soft);
  max-width: var(--w-measure);
}
.section-dark .lede {
  color: color-mix(in srgb,var(--white) 80%,transparent);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: .95em 1.75em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  background-image: linear-gradient(to right,var(--bh,transparent) 0 50%,var(--bb,transparent) 50% 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-origin: border-box;
  transition: background-position .5s var(--ease),color .3s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  background-position: 0 0;
}
.btn-teal {
  --bb: var(--teal);
  --bh: var(--indigo);
  color: var(--teal-ink);
  background-image: linear-gradient(to right,var(--indigo) 0%,var(--navy) 50%,var(--teal) 50%,var(--teal) 100%);
}  /* gradient hover */
.btn-teal:hover {
  color: var(--white);
}
.btn-ghost {
  --bb: transparent;
  --bh: var(--white);
  border-color: color-mix(in srgb,var(--white) 50%,transparent);
  color: var(--white);
}
.btn-ghost:hover {
  color: var(--navy);
  border-color: var(--white);
}

/* header */
.site-header {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 100;
  transition: top .3s var(--ease);
}
.site-header.scrolled {
  top: -8px;
}
.site-header .bar {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  padding: 12px 4px 12px 26px;
  min-height: 83px;
}
@property --bub {
  syntax: "<length>";
  inherits: true;
  initial-value: 71px;
}
.nav-glass {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 142px;
  z-index: -1;
  --bub: 71px;
  --band: 68px;
  --cap: 34px;
  --bubx: 70px;
  background: color-mix(in srgb,var(--navy) 55%,transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  filter: drop-shadow(0 12px 26px rgba(8,12,38,.4));
  -webkit-mask: linear-gradient(#000,#000) center/calc(100% - var(--band)) var(--band) no-repeat,
       radial-gradient(var(--cap) at var(--cap) 50%,#000 98%,#0000 100%) 0 0/100% 100% no-repeat,
       radial-gradient(var(--cap) at calc(100% - var(--cap)) 50%,#000 98%,#0000 100%) 0 0/100% 100% no-repeat,
       radial-gradient(var(--bub) at var(--bubx) 50%,#000 98%,#0000 100%) 0 0/100% 100% no-repeat;
  -webkit-mask-composite: source-over;
  mask: linear-gradient(#000,#000) center/calc(100% - var(--band)) var(--band) no-repeat,
       radial-gradient(var(--cap) at var(--cap) 50%,#000 98%,#0000 100%) 0 0/100% 100% no-repeat,
       radial-gradient(var(--cap) at calc(100% - var(--cap)) 50%,#000 98%,#0000 100%) 0 0/100% 100% no-repeat,
       radial-gradient(var(--bub) at var(--bubx) 50%,#000 98%,#0000 100%) 0 0/100% 100% no-repeat;
  mask-composite: add;
  transition: --bub .45s var(--ease),background .4s var(--ease);
}
.scrolled .nav-glass {
  --bub: 30px;
  background: color-mix(in srgb,var(--white) 95%,transparent);
  filter: drop-shadow(0 12px 28px color-mix(in srgb,var(--navy) 16%,transparent)) drop-shadow(0 0 1px color-mix(in srgb,var(--navy) 16%,transparent));
}
.logo-bubble {
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 6;
  width: 142px;
  height: 142px;
  background: var(--indigo);  /* brand-guide "Blue Background" logo treatment (top state) */
  border-radius: 50%;
  transition: background .4s var(--ease);
}
.scrolled .logo-bubble {
  background: transparent;  /* scrolled: colored mark on the white pill */
}
.logo-bubble img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: auto;
  transition: height .45s var(--ease),opacity .4s var(--ease);
}
.logo-bubble .lw {
  height: 96px;
  opacity: 1;
  top: calc(50% + 3px);  /* same artwork centering as .ld (mark-only canvas) */
}
.logo-bubble .ld {
  height: 40px;
  opacity: 0;
  top: calc(50% + 3px);
}
.scrolled .logo-bubble .lw {
  height: 40px;
  opacity: 0;
}
.scrolled .logo-bubble .ld {
  height: 58px;
  opacity: 1;
}
.brand-spacer {
  flex: 0 0 auto;
  width: 150px;
  height: 1px;
}
.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  position: relative;
  display: inline-block;
  font-family: "Poppins";
  font-weight: 500;
  font-size: var(--fs-sm);
  color: color-mix(in srgb,var(--white) 88%,transparent);
  transition: color .2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: var(--teal);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:hover::after {
  transform: scaleX(1);
}
.nav-links a:hover {
  color: var(--teal);
}
.scrolled .nav-links a {
  color: var(--ink);
}
.scrolled .nav-links a:hover {
  color: var(--indigo);
}
/* "Contact Us" dropdown (B2B / Partnership) */
.nav-links .has-sub {
  position: relative;
}
.nav-links .has-sub::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}  /* hover bridge across the gap */
.nav-links .subnav {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 174px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: 14px;
  box-shadow: 0 26px 54px -26px color-mix(in srgb,var(--navy) 45%,transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease),transform .22s var(--ease);
  z-index: 60;
}
.nav-links .has-sub:hover .subnav,
.nav-links .has-sub:focus-within .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-links .subnav a {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--ink);
  font-weight: 500;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.nav-links .subnav a::after {
  display: none;
}
.nav-links .subnav a:hover,
.nav-links .subnav a.active {
  background: var(--mist);
  color: var(--indigo);
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 20px 8px 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.4px;
  background: var(--white);
  border-radius: 3px;
  margin: 5px 0;
}
.scrolled .nav-toggle span {
  background: var(--ink);
}

/* hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--white);
  overflow: hidden;
  background: var(--navy);
}
.hero-main {
  position: relative;
  z-index: 3;
}
.hero:not(.heroimg) .hero-main {
  height: 100svh;
  display: grid;
  grid-template-rows: 108px 1fr 68px;
  text-align: center;
}  /* homepage hero: nav-clearance / content / scroll-cue rows */
.hero-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%,rgba(8,12,48,.42),transparent 70%);
  pointer-events: none;
}
/* hero bokeh overlay */
.hero-bokeh {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: .5;
  background: linear-gradient(125deg,color-mix(in srgb,var(--indigo) 78%,var(--navy)) 0%,var(--indigo) 38%,color-mix(in srgb,var(--cyan) 80%,var(--navy)) 78%,var(--teal) 120%);
}  /* hero gradient + blobs: indigo->teal, deep ends mixed toward navy */
.hero-bokeh .hb {
  position: absolute;
  border-radius: 50%;
  filter: blur(44px);
  will-change: transform;
  transform: translate(-50%,-50%);
}  /* blob positions; left/top = static fallback */
.hero-bokeh .b1 {
  width: 25vw;
  height: 25vw;
  min-width: 250px;
  min-height: 250px;
  background: var(--teal);
  left: 87.5%;
  top: 15%;
  opacity: .72;
}  /* top-right */
.hero-bokeh .b2 {
  width: 30vw;
  height: 30vw;
  min-width: 300px;
  min-height: 300px;
  background: var(--cyan);
  left: -3%;
  top: 80%;
  opacity: .72;
}  /* bottom-left */
.hero-bokeh .b3 {
  width: 35vw;
  height: 35vw;
  min-width: 340px;
  min-height: 340px;
  background: var(--teal);
  left: 77.5%;
  top: 70%;
  opacity: .6;
}  /* bottom-right blob */
.hero-main .wrap {
  position: relative;
  z-index: 2;
  grid-row: 2;
  align-self: safe center;
}
.stats-sec {
  position: relative;
  background: var(--navy);
  padding: clamp(60px,7.5vw,100px) 0;
}
/* hero photo layer */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: inset(0);
}
.hero-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("assets/img/times-printers-paper-roll-hero.jpg") center center/cover no-repeat;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(6,10,40,.5) 0%,rgba(6,10,40,.32) 42%,rgba(6,10,40,.58) 100%);
}
.hero .wrap {
  position: relative;
  z-index: 3;
  max-width: 1000px;
}
.hero h1 {
  font-size: max(2.6rem,min(var(--fs-display),15svh));
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.035em;
  line-height: .98;
  text-shadow: 0 2px 40px rgba(6,10,40,.45);
}  /* full size normally, height-capped on short screens */
.hero h1 .dot {
  color: var(--teal);
}
.hero:not(.heroimg) p.sub {
  font-family: "Poppins";
  font-weight: 400;
  font-size: var(--fs-sub);
  color: color-mix(in srgb,var(--white) 90%,transparent);
  margin: 28px auto 0;
  max-width: 56ch;
  line-height: 1.4;
}  /* homepage hero sub only */
@media (max-width:479.98px) {
  .hero .sub-brk {
    display: none;
  }
}
@media (max-width:599.98px) {
  .sec-head .sub-brk {
    display: none;
  }
}  /* conditional headline break: disabled below the 600px text column */
@media (max-width:759.98px) {
  .page-consultancy #how-we-help .sub-brk {
    display: none;
  }
}  /* disables at the wide 760px column */
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}
/* scroll cue: its own grid row, always visible */
.scroll-cue {
  grid-row: 3;
  align-self: center;
  justify-self: center;
  z-index: 4;
  pointer-events: none;
}
.scroll-mouse {
  display: block;
  width: 22px;
  height: 34px;
  border: 2px solid color-mix(in srgb,var(--white) 55%,transparent);
  border-radius: 12px;
}
.scroll-dot {
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: color-mix(in srgb,var(--white) 90%,transparent);
  margin: 6px auto 0;
  animation: scrollcue 1.7s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scrollcue {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  22% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(11px);
  }
}
@media (prefers-reduced-motion:reduce) {
  .scroll-dot {
    animation: none;
    opacity: .9;
  }
}
/* short viewports: compress the hero so headline + text + buttons + scroll cue all stay on one screen */
@media (max-height:720px) {
  .hero-actions {
    margin-top: 24px;
  }
}
@media (max-height:560px) {
  .hero-actions {
    margin-top: 16px;
  }
  .hero-actions .btn {
    padding: .72em 1.45em;
    font-size: var(--fs-sm);
  }
  .scroll-mouse {
    width: 20px;
    height: 30px;
  }
}

/* stats band */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  text-align: center;
}
.stat-band .s {
  padding: 10px 18px;
  border-right: 1px solid color-mix(in srgb,var(--white) 14%,transparent);
}
.stat-band .s:last-child {
  border-right: 0;
}
.stat-band b {
  font-family: "Poppins";
  display: block;
  font-size: var(--fs-stat);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1;
}
.stat-band b em {
  font-style: normal;
  color: var(--teal);
  font-size: .56em;
  font-weight: 500;
}
.stat-band span {
  display: block;
  margin-top: 10px;
  color: color-mix(in srgb,var(--white) 72%,transparent);
  font-family: "Poppins";
  font-weight: 500;
  font-size: var(--fs-sm);
}

/* intro */
.two {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px,5vw,72px);
  align-items: center;
}
/* .fx-fig — interactive image frame (cursor tilt + scroll parallax, wired in site.js) */
.fx-fig {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--white) 12%,transparent);
  box-shadow: 0 40px 80px -42px color-mix(in srgb,var(--navy) 50%,transparent);
  transition: transform .35s var(--ease);
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.fx-fig img {
  position: absolute;
  top: -8%;
  left: -4%;
  width: 108%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease);
  will-change: transform;
  backface-visibility: hidden;
}
.intro-copy p {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: var(--fs-lede);
}
.plus {
  color: var(--orange);
}

/* solutions */
.sec-head {
  max-width: var(--w-measure);
  margin-bottom: clamp(40px,5vw,62px);
}  /* DEFAULT column (--w-measure) */
#solutions .sec-head,
.page-consultancy #how-we-help .sec-head {
  max-width: var(--w-content);
}  /* the WIDE (--w-content) heading column */
.sec-head .title,
.sec-head .lede {
  max-width: none;
}
.sec-head .lede {
  margin-top: 16px;
}
.sec-head--center {
  text-align: center;
  margin-inline: auto;
}  /* centered header variant — used by the JS-injected testimonial section (markup lives in site.js, not the HTML) */
.sec-head--center .title {
  text-wrap: balance;
}  /* keep centered titles from wrapping into a lopsided orphan line */
.cards {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}
/* service tiles */
/* .tile is the static hit-area; the inner .tile-3d does the tilting */
.tile {
  position: relative;
  display: block;
  color: var(--white);
  aspect-ratio: 4/3;
}  /* perspective is applied per-transform in JS (perspective(900px)), matching .fx-fig */
.tile-3d {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--white) 10%,transparent);
  transform-style: preserve-3d;
  transition: transform .7s var(--ease),box-shadow .35s var(--ease);
  will-change: transform;
  backface-visibility: hidden;
}
.tile:hover {
  z-index: 10;
}  /* hovered card on top */
.tile:hover .tile-3d {
  box-shadow: 0 34px 64px -28px rgba(8,12,38,.6),0 10px 24px -14px rgba(8,12,38,.45);
}  /* shadow on the tilting card so it moves with it */
.tile img {
  position: absolute;
  left: -6%;
  top: -7%;
  width: 112%;
  height: 114%;
  max-width: none;
  object-fit: cover;
  transition: scale .5s var(--ease),transform .4s var(--ease);
  backface-visibility: hidden;
}  /* override global img max-width */
.tile:hover img {
  scale: 1.08;
}
.tile-scrim {
  position: absolute;
  inset: 0;
}  /* opacity crossfade */
.tile-scrim::before,
.tile-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity .4s var(--ease);
}
.tile-scrim::before {
  background: linear-gradient(to top,color-mix(in srgb,var(--indigo) 95%,transparent) 6%,color-mix(in srgb,var(--indigo) 50%,transparent) 34%,transparent 62%);
}
.tile-scrim::after {
  background: linear-gradient(to top,color-mix(in srgb,var(--indigo) 96%,transparent) 12%,color-mix(in srgb,var(--indigo) 62%,transparent) 52%,color-mix(in srgb,var(--indigo) 12%,transparent) 100%);
  opacity: 0;
}
.tile:hover .tile-scrim::before {
  opacity: 0;
}
.tile:hover .tile-scrim::after {
  opacity: 1;
}
.tile-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 30px;
  transition: transform .4s var(--ease);
}  /* parallax at .fx-fig speed */
.tile-body .bar {
  display: block;
  width: 34px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin-bottom: 14px;
  transition: width .35s var(--ease);
}
.tile:hover .tile-body .bar {
  width: 58px;
}
.tile-body h3 {
  color: var(--white);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 0;
}
.tile-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease),opacity .35s var(--ease),margin .4s var(--ease);
}
.tile:hover .tile-desc {
  max-height: 160px;
  opacity: 1;
  margin-top: 10px;
}
.tile-desc p {
  color: color-mix(in srgb,var(--white) 82%,transparent);
  font-size: var(--fs-sm);
}
.tile-desc .more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: var(--teal);
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* mid cta */
.midcta {
  background: var(--teal);
  color: var(--teal-ink);
  text-align: center;
  overflow: hidden;
}
/* freezes at 960px wide below that (sides crop) */
.net-canvas {
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 960px;
  z-index: 0;
  pointer-events: none;
}
.midcta .wrap {
  position: relative;
  z-index: 1;
}
.midcta h2 {
  color: var(--teal-ink);
  font-size: var(--fs-h2);
}
.midcta p {
  max-width: var(--w-measure);
  margin: 18px auto 0;
  color: var(--teal-ink);
  font-size: var(--fs-lede);
}
.midcta .hero-actions {
  margin-top: 32px;
}
.midcta .btn-dark,
.contact-teal .btn-dark {
  --bb: var(--indigo);
  --bh: var(--white);
  color: var(--white);
}
.midcta .btn-dark:hover,
.contact-teal .btn-dark:hover {
  color: var(--indigo);
}
/* teal geometric contact CTA (shared; same network canvas as the mid-page CTA) */
.contact-teal {
  position: relative;
  background: var(--teal);
  color: var(--teal-ink);
  overflow: hidden;
}
.contact-teal .wrap {
  position: relative;
  z-index: 1;
}
.contact-teal .title {
  color: var(--teal-ink);
}
.contact-teal .lede {
  color: var(--teal-ink);
  margin-top: 16px;
}

/* promise */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: auto auto 48px auto auto;
  column-gap: 34px;
  row-gap: 18px;
  margin-top: 96px;
}
.pcard {
  position: relative;
  padding: 66px 30px 40px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--mist);
  text-align: center;
}
/* registered properties so the hover recolour can transition (gradients themselves cannot) */
@property --pic-a {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --pic-b {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
.pcard .pic {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  --pic-a: var(--indigo);
  --pic-b: var(--navy);
  background: radial-gradient(circle at 32% 26%,var(--pic-a) 0%,var(--pic-b) 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px -14px color-mix(in srgb,var(--navy) 60%,transparent);
  transition: transform .4s var(--ease),--pic-a .4s var(--ease),--pic-b .4s var(--ease);
  will-change: transform;
}
.pcard .pic img {
  width: 62px;
  height: auto;
}
.pcard:hover .pic {
  transform: translate(-50%,-50%) scale(1.09);
  --pic-a: color-mix(in srgb,var(--indigo) 75%,var(--white));
  --pic-b: color-mix(in srgb,var(--indigo) 55%,var(--navy));
}
.pcard h3 {
  font-size: var(--fs-h4);
  line-height: 1.2;
  margin-bottom: 8px;
}
.pcard p {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
/* subgrid aligns icon / headline / text bands across each row */
.grid3 .pcard {
  display: grid;
  grid-template-rows: subgrid;
  padding-top: 74px;
}
.grid3 .pcard:nth-child(-n+3) {
  grid-row: 1/span 2;
}
.grid3 .pcard:nth-child(n+4) {
  grid-row: 4/span 2;
}
.grid3 .pcard h3 {
  align-self: center;
  margin: 0;
}
.grid3 .pcard p {
  align-self: center;
}

/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(34px,5vw,64px);
  align-items: start;
}
.form-card {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--mist);
  border-radius: 24px;
  padding: clamp(26px,3.4vw,40px);
  box-shadow: 0 40px 80px -50px color-mix(in srgb,var(--navy) 50%,transparent);
}  /* the white card sets its own text colour */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-family: "Poppins";
  font-weight: 500;
  font-size: var(--fs-xs);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: "Roboto";
  font-size: var(--fs-body);
  padding: 12px 14px;
  border: 1.5px solid var(--mist);
  border-radius: 12px;
  background: color-mix(in srgb,var(--mist) 45%,var(--white));
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--indigo) 12%,transparent);
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}
/* honeypot (kept off-screen, not display:none) */
.form-hp {
  position: absolute !important;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
/* inline submit status on the contact form */
.form-msg {
  margin: 16px 0 0;
  font-family: "Poppins";
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.45;
  padding: 12px 16px;
  border-radius: 12px;
}
.form-msg.ok {
  background: color-mix(in srgb,var(--teal) 14%,transparent);
  color: var(--teal-ink);
  border: 1px solid color-mix(in srgb,var(--teal) 55%,transparent);
}
.form-msg.err {
  background: color-mix(in srgb,var(--orange) 12%,transparent);
  color: var(--ink);
  border: 1px solid color-mix(in srgb,var(--orange) 45%,transparent);
}
/* flag invalid fields after a submit attempt */
.form-card.was-validated .field input:invalid,
.form-card.was-validated .field textarea:invalid,
.form-card.was-validated .field select:invalid {
  border-color: var(--danger);
}
.form-card.was-validated .field input:invalid:focus,
.form-card.was-validated .field textarea:invalid:focus,
.form-card.was-validated .field select:invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--danger) 16%,transparent);
}
.form-card .btn {
  width: 100%;
  justify-content: center;
}
.form-card .btn-dark {
  --bb: var(--indigo);
  --bh: var(--teal);
  color: var(--white);
}
.form-card .btn-dark:hover {
  color: var(--teal-ink);
}

/* footer */
.footer {
  background: var(--footer-bg);
  color: color-mix(in srgb,var(--white) 70%,transparent);
  padding: 70px 0 28px;
  position: relative;
}
.footer a {
  color: color-mix(in srgb,var(--white) 70%,transparent);
}
.footer a:hover {
  color: var(--teal);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 42px;
  border-bottom: 1px solid color-mix(in srgb,var(--white) 12%,transparent);
}
.footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background: #000;  /* brand-guide "Reverse White" logo treatment */
}
.footer-brand img {
  height: 96px;
  transform: translate(3px, 4.5px);  /* optical centering: measured ink-mass centroid of the mark */
}
.footer-brand p {
  max-width: 36ch;
  font-size: var(--fs-sm);
}
.footer h4 {
  font-family: "Poppins";
  color: var(--white);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-sm);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 24px;
  font-size: var(--fs-xs);
  color: color-mix(in srgb,var(--white) 50%,transparent);
}
.footer-bottom .legal {
  display: flex;
  gap: 20px;
}
.footer-bottom .fb-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-credit {
  font-size: var(--fs-xs);
  color: color-mix(in srgb,var(--white) 20%,transparent);
}
.footer-credit a {
  color: color-mix(in srgb,var(--white) 20%,transparent);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-credit a:hover {
  color: var(--teal);
}

/* testimonial slider */
.tslider {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 56px;
}
.tviewport {
  overflow: hidden;
}
.ttrack {
  display: flex;
  transition: transform .55s var(--ease);
}
.tslide {
  flex: 0 0 100%;
  text-align: center;
  padding: 6px;
}
.tquote {
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.38;
  color: var(--white);
  letter-spacing: -.015em;
}
.tquote::before {
  content: "“";
  color: var(--teal);
}
.tmeta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tlogo {
  height: 56px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.5);
}
.tlogo img {
  max-height: 30px;
  max-width: 170px;
  width: auto;
  object-fit: contain;
}
.tname {
  font-family: "Poppins";
  font-weight: 600;
  color: var(--white);
}
.trole {
  color: color-mix(in srgb,var(--white) 70%,transparent);
  font-size: var(--fs-sm);
  max-width: 40ch;
}
.tnav {
  position: absolute;
  top: 34%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb,var(--white) 30%,transparent);
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-icon);
  line-height: 1;
  color: var(--white);
  display: grid;
  place-items: center;
  transition: .2s var(--ease);
  z-index: 2;
}
.tnav:hover {
  background: var(--teal);
  color: var(--teal-ink);
  border-color: var(--teal);
}
.tnav.prev {
  left: 0;
}
.tnav.next {
  right: 0;
}
.tdots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 30px;
}
.tdots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb,var(--white) 30%,transparent);
  cursor: pointer;
  transition: .25s var(--ease);
  padding: 0;
}
.tdots button.on {
  background: var(--teal);
  width: 26px;
  border-radius: 5px;
}

/* scroll reveal - direction via data-reveal, stagger via --reveal-delay (set per element at reveal time by site.js). */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay: var(--reveal-delay,0s);
}
html.js .reveal[data-reveal="left"] {
  transform: translateX(-46px);
}
html.js .reveal[data-reveal="right"] {
  transform: translateX(46px);
}
html.js .reveal[data-reveal="scale"] {
  transform: scale(.93);
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}
/* tiles fade in only — transform stays free for the cursor tilt */
html.js .tile.reveal {
  transform: none;
  transition: opacity .7s var(--ease),transform .16s ease-out,box-shadow .35s var(--ease);
  transition-delay: var(--reveal-delay,0s),0s,0s;
}
@media (prefers-reduced-motion:reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Responsive — desktop-first, framework breakpoints: L ≤979.98 · T ≤767.98 · M ≤479.98.
   A max-width layer applies to that mode AND everything narrower, so the T layer covers Mobile too. ===== */

/* Laptop and below: only the widest grid needs tightening — D and L are otherwise identical. */
@media (max-width:979.98px) {
  .stat-band {
    grid-template-columns: 1fr 1fr;
    gap: 32px 0;
  }
  .stat-band .s:nth-child(even) {
    border-right: 0;
  }  /* 2-col: no border on the right column */
}

/* Tablet and below: stack layouts, drop the sticky fold-in */
@media (max-width:767.98px) {
  .two,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .grid3 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 72px;
  }
  .grid3 .pcard,
  .grid3 .pcard:nth-child(-n+3),
  .grid3 .pcard:nth-child(n+4) {
    display: block;
    grid-row: auto;
    padding-top: 66px;
  }
  .grid3 .pcard h3 {
    margin-bottom: 8px;
  }
  /* footer: brand + link families centered */
  .footer-top {
    grid-template-columns: repeat(2,minmax(0,120px));
    justify-content: center;
    gap: 30px 34px;
  }
  .footer-brand {
    grid-column: 1/-1;
    text-align: center;
  }
  .footer-badge {
    margin-inline: auto;
  }
  .footer-brand p {
    max-width: 300px;
    margin-inline: auto;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-bottom .fb-left {
    align-items: center;
  }
  section.pin {
    position: relative;
  }  /* keeps the positioning context for absolute children */
  .section {
    padding: clamp(54px,9vw,88px) 0;
  }
  .wm::before {
    opacity: .06;
  }  /* fainter TP watermark on white sections at tablet/mobile */
  /* touch has no hover: show the hover state permanently */
  .tile-scrim::before {
    opacity: 0;
  }
  .tile-scrim::after {
    opacity: 1;
  }
  .tile-desc {
    max-height: none;
    opacity: 1;
    margin-top: 10px;
  }
  .tile-body .bar {
    width: 58px;
  }
  .tile-3d {
    box-shadow: 0 22px 46px -26px rgba(8,12,38,.5);
  }
  .tile-desc p {
    line-height: 1.4;
  }  /* tighter card-copy leading on BOTH tablet and mobile (M matches T) */
}

/* custom 620px swap: the 2-col cards go 1-col here */
@media (max-width:619.98px) {
  .cards {
    grid-template-columns: 1fr;
  }
}
@media (min-width:620px) and (max-width:767.98px) {
  .tile-body {
    padding: 16px 18px;
  }
}

/* Mobile: final tightening. */
@media (max-width:479.98px) {
  .stat-band {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }
  .stat-band .s {
    border-right: 0;
  }  /* 1-col: no right borders at all */
  .form-row {
    grid-template-columns: 1fr;
  }
  .wrap {
    padding: 0 20px;
  }
  .section {
    padding: 46px 0;
  }
  .tile-body {
    padding: 15px 20px;
  }  /* card copy tighter on mobile */
  /* quote gets full width; nav buttons move into the dots row */
  .tslider {
    padding: 0 0 60px;
  }
  .tnav {
    top: auto;
    bottom: 4px;
    width: 42px;
    height: 42px;
  }
  .tdots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    margin-top: 0;
  }
  /* footer: link families to a single centered column, all content centered */
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-top > div {
    text-align: center;
  }
  .footer ul {
    align-items: center;
  }
}

/* ===== NAV — 3 modes: full (>1080) / condensed dropdown (601-1080) / hamburger (<=600) ===== */

/* Desktop: hide the grouped "Our Solutions" item; the individual solution links show. */
.nav-links .nav-solutions {
  display: none;
}
/* "Home" is only for the hamburger panel — hidden on desktop + condensed nav. */
.nav-links .nav-mobile-home {
  display: none;
}

/* condensed nav below 1080 (the full link row overflows before 980) */
@media (max-width:1080px) {
  .nav-links .nav-full {
    display: none;
  }
  .nav-links .nav-solutions {
    display: block;
  }
}
/* hamburger from tablet down */
@media (max-width:767.98px) {
  .btn.navbtn {
    display: none;
  }
  .nav-toggle {
    display: block;
    z-index: 130;
  }
  /* hamburger opens a white drop panel below the bar */
  .nav-links {
    display: none;
  }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: calc(100% + 10px);
    left: 14px;
    right: 14px;
    background: var(--white);
    border: 1px solid var(--mist);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 30px 60px -28px color-mix(in srgb,var(--navy) 50%,transparent);
    z-index: 120;
  }
  /* flat panel: every link shown flat, no nesting */
  .nav-links.open .nav-mobile-home {
    display: block;
  }
  .nav-links.open .nav-full {
    display: block;
  }
  .nav-links.open .nav-solutions {
    display: none;
  }
  .nav-links.open li {
    width: 100%;
  }
  .nav-links.open a {
    display: block;
    color: var(--ink);
    font-size: var(--fs-body);
    padding: 12px 14px;
    border-radius: 11px;
  }
  .nav-links.open a::after {
    display: none;
  }
  .nav-links.open a:hover,
  .nav-links.open a:active {
    background: var(--mist);
    color: var(--indigo);
  }
  .nav-links.open .has-sub {
    position: static;
  }
  .nav-links.open .has-sub::after {
    display: none;
  }
  .nav-links.open .has-sub > a {
    font-weight: 500;
    color: var(--ink);
  }
  .nav-links.open .subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0;
    min-width: 0;
  }
  /* pin the open submenu (the desktop hover rule would offset it) */
  .nav-links.open .has-sub:hover .subnav,
  .nav-links.open .has-sub:focus-within .subnav {
    transform: none;
  }
  /* first submenu item dropped (duplicate of the parent link) */
  .nav-links.open .subnav li:first-child {
    display: none;
  }
  .nav-links.open .subnav a {
    font-size: var(--fs-body);
    padding: 12px 14px;
  }
  /* hamburger morphs to X when open */
  .nav-toggle.open span:nth-child(1) {
    transform: translateY(7.4px) rotate(45deg);
  }
  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7.4px) rotate(-45deg);
  }
  .nav-toggle span {
    transition: transform .25s var(--ease),opacity .2s var(--ease);
  }
  /* nav ~20% shorter on tablet/mobile (smaller pill + logo, same length) */
  .site-header .bar {
    min-height: 66px;
  }
  .nav-glass {
    height: 114px;
    --bub: 57px;
    --band: 54px;
    --cap: 27px;
    --bubx: 56px;
  }
  .scrolled .nav-glass {
    --bub: 24px;
  }
  .logo-bubble {
    width: 114px;
    height: 114px;
    left: 56px;
  }
  .logo-bubble .lw {
    height: 77px;
    top: calc(50% + 4px);
  }
  .logo-bubble .ld {
    height: 32px;
  }
  .scrolled .logo-bubble .lw {
    height: 32px;
  }
  .scrolled .logo-bubble .ld {
    height: 46px;
  }
}

/* ---- layout helpers (replace former inline styles) ---- */
.title.title-2line {
  text-wrap: balance;
}
.lede.lede-note {
  font-family: "Poppins";
  color: var(--indigo);
  font-weight: 500;
  margin-top: 8px;
}
.opt {
  color: var(--ink-soft);
  font-weight: 400;
}
.req {
  color: var(--danger);
  font-weight: 400;
}

/* ============ Solution pages (consultancy / creative / print / logistics / about hero+cards+faq) ============ */
/* ---- service page additions ---- */
.subhead {
  font-family: "Poppins";
  font-weight: 500;
  font-size: var(--fs-sub);
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.section-dark .subhead {
  color: color-mix(in srgb,var(--white) 82%,transparent);
}
/* hero: full-bleed fixed image, headline + frosted card, pinned fold-in */
.hero.heroimg {
  text-align: center;
  height: 100svh;
}
.hero.heroimg .wrap {
  max-width: var(--maxw);
}
/* hero photo layer */
.hero.heroimg .hero-bg2 {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: inset(0);
}
.hero.heroimg .hero-bg2::before {
  content: "";
  position: fixed;
  inset: 0;
  background: center center/cover no-repeat;
}
.hero.heroimg .hero-bg2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(7,11,38,.58),rgba(7,11,38,.72));
}
/* 140px nav-clearance row, content centered below it */
.hero.heroimg .hero-main {
  height: 100svh;
  display: grid;
  grid-template-rows: 140px 1fr;
  padding: 0;
}
.heroimg h1 {
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1.1;
  text-shadow: 0 2px 40px rgba(6,10,40,.5);
}
.heroimg h1 .tl,
.heroimg h1 .dot {
  color: var(--teal);
}
.heroimg .sub {
  font-family: "Poppins";
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
  letter-spacing: -.01em;
}
.heroimg .para {
  color: color-mix(in srgb,var(--white) 84%,transparent);
  font-size: var(--fs-body);
  line-height: 1.62;
}
.heroimg .hero-actions {
  margin-top: 30px;
}
/* headline left + frosted glass card right */
.hv3 .hv3-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(34px,5vw,64px);
  align-items: center;
}
.hv3 .hv3-title h1 {
  font-size: var(--fs-h1);
}
.hv3 .hv3-title .sub {
  font-size: var(--fs-sub);
  margin-top: 18px;
  color: color-mix(in srgb,var(--white) 92%,transparent);
}
.hv3 .hv3-card {
  background: color-mix(in srgb,var(--navy) 42%,transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb,var(--white) 18%,transparent);
  border-radius: 22px;
  padding: clamp(26px,3vw,40px);
  box-shadow: 0 30px 70px -40px rgba(6,10,40,.6);
}
.hv3 .hv3-card .para {
  margin-top: 14px;
}
.hv3 .hv3-card .para:first-child {
  margin-top: 0;
}
/* hero columns converge in, with a short start delay */
html.js .hv3 .reveal {
  transition: opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay: .3s;
}
html.js .hv3 .reveal[data-reveal="left"] {
  transform: translateX(-90px);
}
html.js .hv3 .reveal[data-reveal="right"] {
  transform: translateX(90px);
}
html.js .hv3 .reveal.in {
  transform: none;
}
@media (prefers-reduced-motion:reduce) {
  html.js .hv3 .reveal,
  html.js .hv3 .reveal[data-reveal="left"],
  html.js .hv3 .reveal[data-reveal="right"] {
    transform: none;
    transition: none;
  }
}
/* image-left section */
.svc3 {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(34px,5vw,62px);
  align-items: center;
}
/* svc3 image frame is the shared .fx-fig */
.cap-cards {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 18px;
  margin-top: 84px;
}
/* subgrid aligns headline / text bands across the cards */
.cap-cards .pcard {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  padding-top: 74px;
}
.cap-cards .pcard h3 {
  align-self: center;
  margin: 0;
}
.cap-cards .pcard p {
  align-self: center;
}
/* generic full-image section (s4) */
.imgsec {
  position: relative;
  color: var(--white);
  overflow: hidden;
  text-align: center;
}
/* section image layer */
.imgsec .img-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: inset(0);
}
.imgsec .img-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.imgsec .img-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5,8,28,.82);
}
.imgsec .wrap {
  position: relative;
  z-index: 1;
}
.imgsec .title {
  color: var(--white);
}
.imgsec .subhead {
  color: var(--teal);
}
.imgsec-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.imgsec .lede {
  max-width: none;
  margin-top: 18px;
  color: color-mix(in srgb,var(--white) 85%,transparent);
}
.imgsec .hero-actions {
  justify-content: center;
  margin-top: 30px;
}
/* stat band descriptions */
.stat-band.has-desc {
  align-items: start;
  margin-top: clamp(48px,6vw,76px);
}
.stat-band .s .sdesc {
  display: block;
  margin-top: 14px;
  color: color-mix(in srgb,var(--white) 60%,transparent);
  font-family: "Roboto";
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
/* faq */
.faq {
  max-width: 880px;
  border-top: 1px solid var(--mist);
}
.faq details {
  border-bottom: 1px solid var(--mist);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 46px 22px 0;
  position: relative;
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-lede);
  color: var(--ink);
  transition: color .2s;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-icon);
  font-weight: 400;
  color: var(--indigo);
}
.faq details[open] summary::after {
  content: "−";
}
.faq summary:hover {
  color: var(--indigo);
}
.faq .faq-a {
  padding: 0 46px 0 0;
  height: 0;
  overflow: hidden;
  transition: height .34s var(--ease);
}
.faq details[open] .faq-a {
  height: auto;
}
.faq .faq-a p {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.7;
  margin: 0 0 24px;
}
/* Laptop and below: 4-col capability cards + stat band → 2-col (the only real D/L difference). */
@media (max-width:979.98px) {
  .cap-cards {
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: none;
    row-gap: 40px;
  }
  .cap-cards .pcard {
    display: block;
    grid-row: auto;
    padding-top: 66px;
  }  /* restore space for the absolute .pic icon */
  .stat-band.has-desc {
    gap: 36px 0;
  }
}
/* Tablet and below: stack the hero grid + image/text section; cards to 1-col; shrink hero padding. */
@media (max-width:767.98px) {
  .hero.heroimg {
    height: auto;
  }
  .hero.heroimg .hero-main {
    display: block;
    height: auto;
    min-height: auto;
    padding: clamp(104px,22vh,150px) 0 clamp(56px,10vw,84px);
  }
  .hv3 .hv3-grid {
    grid-template-columns: 1fr;
  }
  .svc3 {
    grid-template-columns: 1fr;
  }
  .cap-cards {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }
}
/* Mobile: stat band to a single column. */
@media (max-width:479.98px) {
  .stat-band.has-desc {
    grid-template-columns: 1fr;
  }
}

/* ---- spacing + asset bindings (former inline styles) ---- */
#how-we-help .sec-head .lede {
  margin-top: 20px;
}
.svc3 .lede {
  margin-top: 18px;
}
/* per-page hero + section-4 background images, bound by body.page-<slug> */
.page-consultancy .hero.heroimg .hero-bg2::before {
  background-image: url("assets/img/times-printers-service-consultancy.jpg");
}
.page-creative   .hero.heroimg .hero-bg2::before {
  background-image: url("assets/img/times-printers-service-creative.jpg");
}
.page-production .hero.heroimg .hero-bg2::before {
  background-image: url("assets/img/times-printers-service-production.jpg");
}
.page-logistics  .hero.heroimg .hero-bg2::before {
  background-image: url("assets/img/times-printers-service-logistics.jpg");
}
.page-about      .hero.heroimg .hero-bg2::before {
  background-image: url("assets/img/times-printers-printed-novels.jpg");
}
.page-consultancy .imgsec .img-bg::before {
  background-image: url("assets/img/times-printers-laser-print.jpg");
}
.page-creative   .imgsec .img-bg::before {
  background-image: url("assets/img/times-printers-print-technology.jpg");
}
.page-production .imgsec .img-bg::before {
  background-image: url("assets/img/times-printers-press-closeup.jpg");
}
.page-logistics  .imgsec .img-bg::before {
  background-image: url("assets/img/times-printers-warehouse-automation.jpg");
}
.page-about      .imgsec .img-bg::before {
  background-image: url("assets/img/times-printers-press-vibrant.jpg");
}

/* ============ About page (timeline, logo grids, awards) ============ */
/* image stretches to the text column's height */
.page-about .svc3 {
  align-items: stretch;
}
.page-about .svc3 .fx-fig {
  aspect-ratio: auto;
}
/* stacked: restore a ratio or the image collapses */
@media (max-width:767.98px) {
  .page-about .svc3 .fx-fig {
    aspect-ratio: 3/2;
  }
}

/* timeline: per-item rail (dot + connecting line) beside the milestone copy */
.timeline {
  max-width: 860px;
  margin: clamp(40px,5vw,64px) auto 0;
}
.tl-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px,3vw,36px);
}
.tl-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tl-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 7px;
  flex: none;
  box-shadow: 0 0 0 5px color-mix(in srgb,var(--teal) 16%,transparent);
}
.tl-line {
  width: 2px;
  flex: 1;
  background: var(--mist);
  margin-top: 8px;
}
.tl-item:last-child .tl-line {
  display: none;
}
.tl-body {
  padding-bottom: clamp(30px,4vw,52px);
}
.tl-year {
  font-family: "Poppins";
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--indigo);
  line-height: 1;
}
.tl-body h3 {
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-h4);
  margin-top: 6px;
}
.tl-body p {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.65;
  margin-top: 8px;
}
.tl-coda {
  max-width: 760px;
  margin: clamp(20px,3vw,30px) auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
}

/* customer + credential logo grids */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: clamp(18px,2.5vw,34px);
  align-items: center;
  margin-top: clamp(36px,4vw,52px);
}
.logo-grid img {
  width: 100%;
  height: 64px;
  object-fit: contain;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity .3s var(--ease),filter .3s var(--ease);
}
.logo-grid img:hover {
  opacity: 1;
  filter: none;
}
/* white chips so the mixed-colour logos read on any section */
.cert-block {
  margin-top: clamp(30px,3.5vw,46px);
}
.cert-group-label {
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--teal);
  margin: 0 0 14px;
}
.cert-grid {
  display: flex;
  gap: 14px;
  margin-bottom: clamp(22px,3vw,32px);
}
.cert-grid:last-child {
  margin-bottom: 0;
}
.cert-chip {
  flex: 1 1 0;
  min-width: 0;
  background: var(--white);
  border-radius: 12px;
  height: 84px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px -20px rgba(0,0,0,.55);
}
.cert-chip img {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width:767.98px) {
  .cert-grid {
    flex-wrap: wrap;
  }
  .cert-chip {
    flex: 1 1 40%;
    height: 72px;
    padding: 10px 14px;
  }
  .cert-chip img {
    max-height: 46px;
  }
}

/* awards grid (dark section) */
.awards-grid {
  margin-top: clamp(38px,4vw,56px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(18px,2vw,26px);
  align-items: start;
}
.award-col {
  display: grid;
  gap: clamp(18px,2vw,26px);
  align-content: start;
}
.award-card {
  background: color-mix(in srgb,var(--white) 4%,transparent);
  border: 1px solid color-mix(in srgb,var(--white) 12%,transparent);
  border-radius: 18px;
  padding: clamp(22px,2.4vw,30px);
}
.award-org {
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--white);
}
.award-by {
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: color-mix(in srgb,var(--white) 55%,transparent);
  margin-top: 4px;
}
.award-list {
  list-style: none;
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.award-list li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-sm);
  color: color-mix(in srgb,var(--white) 82%,transparent);
  line-height: 1.4;
}
.award-list .yr {
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--teal);
  min-width: 34px;
}
.award-list .medal {
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.medal-gold {
  background: color-mix(in srgb,var(--orange) 16%,transparent);
  color: var(--orange);
  border: 1px solid color-mix(in srgb,var(--orange) 40%,transparent);
}
.medal-silver {
  background: color-mix(in srgb,var(--mist) 14%,transparent);
  color: var(--mist);
  border: 1px solid color-mix(in srgb,var(--mist) 34%,transparent);
}
.medal-bronze {
  background: color-mix(in srgb,var(--bronze) 16%,transparent);
  color: var(--bronze);
  border: 1px solid color-mix(in srgb,var(--bronze) 42%,transparent);
}
.award-list .cat {
  color: color-mix(in srgb,var(--white) 78%,transparent);
}
.award-list li:not(:has(.medal)) .cat {
  grid-column: 2 / -1;
}
@media (max-width:767.98px) {
  .awards-grid {
    grid-template-columns: 1fr;
  }
}

/* careers band */
.hero-actions.careers-cta {
  margin-top: 30px;
  justify-content: flex-start;
}

@media (max-width:767.98px) {
  /* flex so a partial last row of logos stays centred */
  .logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 36px;
  }
  .logo-grid img {
    width: auto;
    max-width: 150px;
  }
  .tl-item {
    gap: 18px;
  }
}
@media (max-width:479.98px) {
  .logo-grid {
    gap: 26px 30px;
  }
  .logo-grid img {
    max-width: 40%;
  }
}

/* ============ Contact pages (b2b / partner split layout) ============ */
.contact-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px,5vw,76px);
  align-items: start;
}
.contact-split .cs-form {
  position: sticky;
  top: 104px;
}
/* named grid areas: lead + areas left, form spans the right */
.page-partner .contact-split {
  grid-template-areas: "lead form" "areas form";
}
.page-partner .cs-lead {
  grid-area: lead;
}
.page-partner .cs-form {
  grid-area: form;
}
.page-partner .cs-areas {
  grid-area: areas;
}
.cs-copy h2 {
  margin-top: clamp(40px,4vw,56px);
}
.cs-copy h2:first-child {
  margin-top: 0;
}
.cs-copy .lede {
  margin-top: 14px;
}
.cs-copy .lede + .lede {
  margin-top: 12px;
}

/* partnership areas list */
.partner-areas {
  margin-top: clamp(28px,3vw,40px);
  display: grid;
  gap: 18px;
}
.partner-area {
  border: 1px solid var(--mist);
  border-radius: 16px;
  padding: 20px 22px;
  background: var(--white);
  transition: border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.partner-area:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -30px color-mix(in srgb,var(--navy) 45%,transparent);
}
.partner-area h3 {
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-lede);
  color: var(--ink);
}
.partner-area p {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-top: 6px;
}

/* compact "what to expect" / quote callouts on the B2B page */
.cs-callout {
  margin-top: clamp(26px,3vw,38px);
  padding: clamp(22px,3vw,30px);
  border-radius: 18px;
  background: var(--mist);
  border: 1px solid var(--mist);
}
.cs-callout h3 {
  font-family: "Poppins";
  font-weight: 600;
  color: var(--indigo);
  font-size: var(--fs-lede);
}
.cs-callout p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin-top: 10px;
}
.cs-quotes {
  margin-top: clamp(26px,3vw,38px);
  display: grid;
  gap: 16px;
}
.cs-quote {
  border-left: 3px solid var(--teal);
  padding: 4px 0 4px 18px;
}
.cs-quote p {
  font-style: italic;
  color: var(--ink);
  line-height: 1.6;
}
.cs-quote span {
  display: block;
  margin-top: 8px;
  font-family: "Poppins";
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  font-style: normal;
}

/* Connect / Partner: dark, image-backed; hero text in the left (scrolling) column,
   form sticky from the top. */
.connect-page {
  position: relative;
  padding-top: clamp(170px,calc(15vh + 50px),230px);
}
/* section image layer */
.connect-page .img-bg {
  position: absolute;
  inset: -2px 0;
  z-index: 0;
  clip-path: inset(0);
}
.connect-page .img-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.connect-page .img-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7,11,38,.86);
}
.connect-page .wrap {
  position: relative;
  z-index: 1;
}
.connect-page .cs-hero-h1 {
  color: var(--white);
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.connect-page .cs-hero-h1 .tl,
.connect-page .cs-hero-h1 .dot {
  color: var(--teal);
}
.connect-page .cs-hero-sub {
  color: color-mix(in srgb,var(--white) 90%,transparent);
  font-family: "Poppins";
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: 1.42;
  margin-top: 16px;
}
.connect-page .cs-copy .lede {
  color: color-mix(in srgb,var(--white) 82%,transparent);
}
.connect-page .cs-callout {
  background: color-mix(in srgb,var(--white) 5%,transparent);
  border-color: color-mix(in srgb,var(--white) 14%,transparent);
}
.connect-page .cs-callout h3 {
  color: var(--teal);
}
.connect-page .cs-callout p {
  color: color-mix(in srgb,var(--white) 80%,transparent);
}
.connect-page .cs-quote p {
  color: var(--white);
}
.connect-page .cs-quote span {
  color: color-mix(in srgb,var(--white) 60%,transparent);
}
.connect-page .partner-area {
  background: color-mix(in srgb,var(--white) 5%,transparent);
  border-color: color-mix(in srgb,var(--white) 14%,transparent);
}
.connect-page .partner-area h3 {
  color: var(--white);
}
.connect-page .partner-area p {
  color: color-mix(in srgb,var(--white) 72%,transparent);
}
.connect-page .partner-area:hover {
  border-color: var(--teal);
  background: color-mix(in srgb,var(--white) 8%,transparent);
  box-shadow: none;
}
.page-b2b .connect-page .img-bg::before {
  background-image: url("assets/img/times-printers-businessman-phone.jpg");
}
.page-partner .connect-page .img-bg::before {
  background-image: url("assets/img/times-printers-support-digital.jpg");
}

/* trusted band: full-width testimonials below the contact split (de-crowds the hero column) */
.trusted-band .lede {
  color: color-mix(in srgb,var(--white) 82%,transparent);
}
.cs-quotes-grid {
  grid-template-columns: repeat(3,1fr);
  gap: clamp(22px,2.5vw,34px);
  margin-top: clamp(30px,4vw,48px);
}
.trusted-band .cs-quote p {
  color: color-mix(in srgb,var(--white) 92%,transparent);
}
.trusted-band .cs-quote span {
  color: color-mix(in srgb,var(--white) 60%,transparent);
}

@media (max-width:767.98px) {
  .cs-quotes-grid {
    grid-template-columns: 1fr;
  }
  .contact-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* clear the grid-areas when stacking, or the children overlap */
  .page-partner .contact-split {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .page-partner .cs-lead,
  .page-partner .cs-form,
  .page-partner .cs-areas {
    grid-area: auto;
  }
  .contact-split .cs-form {
    position: static;
    top: auto;
  }
}

/* ============ Legal pages (privacy / terms long-form) ============ */
/* clear the fixed nav (no hero on these pages) */
.legal-hero {
  padding: clamp(150px,20vh,220px) 0 clamp(30px,5vw,52px);
  background: var(--navy);
}
.legal-hero .eyebrow {
  letter-spacing: .24em;
}
.legal-hero h1 {
  color: var(--white);
  line-height: 1.1;
  font-size: var(--fs-h1);
  margin-top: 12px;
}
.legal-hero .legal-sub {
  color: color-mix(in srgb,var(--white) 72%,transparent);
  margin-top: 14px;
  max-width: 60ch;
  line-height: 1.6;
}

.legal-body {
  padding: clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px);
}
.legal-body .wrap {
  max-width: 74ch;
}
.legal-body h2 {
  font-family: "Poppins";
  font-weight: 600;
  color: var(--indigo);
  font-size: var(--fs-sub);
  line-height: 1.3;
  margin: clamp(34px,4vw,48px) 0 4px;
}
.legal-body h2:first-child {
  margin-top: 0;
}
.legal-body p {
  color: var(--ink-soft);
  line-height: 1.72;
  margin-top: 14px;
}
.legal-body strong {
  color: var(--ink);
  font-weight: 600;
}
.legal-body ul {
  margin: 14px 0 0;
  padding-left: 1.35em;
}
.legal-body li {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: 8px;
}
.legal-body a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.legal-body a:hover {
  color: var(--teal);
}
.legal-body .legal-copy {
  margin-top: clamp(34px,5vw,56px);
  padding-top: 22px;
  border-top: 1px solid var(--mist);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

/* ============ Utility pages (error / maintenance screens) ============ */
/* Utility pages — error + maintenance: full-viewport branded screens */

.utilpage {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
  padding: 116px 0 48px;
}  /* top clears the fixed header (error page) */
.page-maintenance .utilpage {
  padding: 52px 0;
}  /* maintenance has no header, so no header-clearance padding */
/* soft static brand glow behind the content */
.utilpage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(44% 40% at 74% 26%, color-mix(in srgb,var(--teal) 20%,transparent), transparent 70%),
    radial-gradient(50% 46% at 18% 82%, color-mix(in srgb,var(--cyan) 16%,transparent), transparent 72%);
}
.utilpage .wrap {
  position: relative;
  z-index: 1;
}
.utilpage-inner {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.util-logo {
  height: 150px;
  width: auto;
  margin-bottom: -80px;
  opacity: .95;
}  /* negative margin pulls the press up under the mark */
.util-art {
  width: clamp(250px,42vw,392px);
  height: auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 34px 54px rgba(0,0,0,.4));
}

.utilpage .eyebrow {
  color: var(--teal);
  margin-bottom: 14px;
}
.utilpage h1 {
  font-size: var(--fs-h1);
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0;
}
.utilpage h1 .dot {
  color: var(--teal);
}
.utilpage h1 .no-split {
  white-space: nowrap;
}  /* binds the word to its dots so they wrap together */
.util-lede {
  font-family: "Poppins";
  font-weight: 400;
  font-size: var(--fs-lede);
  color: color-mix(in srgb,var(--white) 82%,transparent);
  line-height: 1.5;
  max-width: 46ch;
  margin: 20px auto 0;
}
.util-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 38px;
}
.util-meta {
  margin-top: 34px;
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: var(--fs-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb,var(--white) 40%,transparent);
}

/* ghost button recoloured for the dark background */
.utilpage .btn-ghost {
  border-color: color-mix(in srgb,var(--white) 55%,transparent);
  color: var(--white);
}
.utilpage .btn-ghost:hover {
  border-color: var(--white);
  color: var(--navy);
  background: var(--white);
}

/* ---- jammed-printer illustration (error) ---- */
.util-art .led {
  transform-box: fill-box;
  transform-origin: center;
  animation: util-blink 1.05s steps(1,end) infinite;
}
@keyframes util-blink {
  0%,
  54% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: .14;
  }
}
.util-art.jam {
  animation: util-shudder 2.6s ease-in-out infinite;
}
@keyframes util-shudder {
  0%,
  72%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  76% {
    transform: translate(0,-1px) rotate(-.7deg);
  }
  80% {
    transform: translate(1px,1px) rotate(.7deg);
  }
  84% {
    transform: translate(-1px,0) rotate(-.5deg);
  }
  88% {
    transform: translate(1px,-1px) rotate(.4deg);
  }
  92% {
    transform: translate(0,0) rotate(0deg);
  }
}
.util-art .paper {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: util-paper 2.6s ease-in-out infinite;
}
@keyframes util-paper {
  0%,
  74%,
  100% {
    transform: rotate(0deg);
  }
  82% {
    transform: rotate(1.6deg);
  }
}

/* ---- serviced-printer illustration (maintenance) ---- */
.util-art .gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: util-spin 7s linear infinite;
}
.util-art .gear-sm {
  transform-box: fill-box;
  transform-origin: center;
  animation: util-spin-rev 4.6s linear infinite;
}
@keyframes util-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes util-spin-rev {
  to {
    transform: rotate(-360deg);
  }
}

/* T/M: smaller mark + less negative pull */
@media (max-width:767.98px) {
  .util-logo {
    height: 120px;
    margin-bottom: -40px;
  }
}

/* maintenance "..." : a left-to-right wave bounce, then a long idle pause, on loop */
.dot span {
  display: inline-block;
  animation: dot-wave 5s ease-in-out infinite;
}
.dot span:nth-child(2) {
  animation-delay: .16s;
}
.dot span:nth-child(3) {
  animation-delay: .32s;
}
@keyframes dot-wave {
  0%,
  12%,
  100% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(-.4em);
  }
}

@media (prefers-reduced-motion:reduce) {
  .util-art,
  .util-art *,
  .dot span {
    animation: none !important;
  }
}

@media (max-width:479.98px) {
  /* mobile: buttons stack */
  .utilpage {
    padding: 104px 0 72px;
  }
  .util-actions {
    flex-direction: column;
    width: 100%;
    max-width: 290px;
  }
  .util-actions .btn {
    width: 100%;
    justify-content: center;
  }
}