/* Zensciences: the opening banner (Design Trend Report 2027), on its own.
   Copied from the home page (11thnov: src/styles.css, src/design/tokens.css, src/design/type.css). */

/* Palette: the single source of colour. CSS reads these as variables; JS reads them via design/palette.js. */
:root {
  /* surfaces */
  --black: #000000;
  --white: #ffffff;
  --void: #000000;          /* page + darkest surface */
  --ink: #0e0e0e;
  --haze: #141414;
  --paper: #f2eee7;         /* text on dark */
  --paper-2: #e9e4da;
  --paper-hi: #fbf9f5;      /* raised card on paper */
  /* text */
  --graphite: #161616;      /* text on paper */
  --muted: #8c8c8c;
  --muted-ink: #5c5c5c;
  /* accents */
  --signal: #e00062;
  --signal-text: #ff3d8b;   /* signal for text on dark (AA) */
  --signal-ink: #b4004e;    /* signal for small text on paper (AA) */
  --coral: #fe4c64;
  --violet: #8c6bff;
  --sky: #161616;           /* mid sky */
  --sky-glow: #4a4a4a;      /* horizon band */
  --field-top: #1e1e1e;     /* Ordinary's planet tiles, as they read on screen (three/blocks.js tunes the light to land on it) */
  --gold: #ffca2a;
  /* Impact's case-study blocks: each client's colours as lit glass (matched to the reference render) */
  --brand-walmart: #1f5cff;
  --brand-walmart-2: #4a9bff;
  --brand-ltts: #0a6cff;
  --brand-ltts-2: #29cfff;
  --brand-harman: #6a2bff;
  --brand-harman-2: #ff2fa8;
  /* the nine services' slabs (05 Services): violet round the ring into the signal pink */
  --services-1: #6b4dff;
  --services-2: #ff3d8b;
  /* the three core areas round the signal (03 Secret): circle · triangle · square */
  --area-1: #d9b97a;        /* Business Context: champagne */
  --area-2: #b3a2ff;        /* Creative Excellence: lilac */
  --area-3: #8ec5ff;        /* Digital Experiences: ice */
  /* hairlines */
  --line-d: color-mix(in srgb, var(--white) 12%, transparent);
  --line-l: color-mix(in srgb, var(--graphite) 14%, transparent);
}


:root {

  --f-display: 'Cabin Variable', 'Cabin', system-ui, sans-serif;
  --f-brand: 'Cabin Variable', 'Cabin', system-ui, sans-serif;
  --f-body: 'Cabin Variable', 'Cabin', system-ui, sans-serif;
  --f-label: 'Cabin Variable', 'Cabin', system-ui, sans-serif;   /* eyebrows, captions, small caps labels */

  --pad: clamp(20px, 4.2vw, 72px);
  --hdr-h: 76px;
  --radius: 28px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --fs-body: clamp(1.0625rem, 0.3vw + 0.98rem, 1.1875rem);
}

/* ── base */
*, *::before, *::after { box-sizing: border-box; }
/* html { background: var(--void); color-scheme: dark; -webkit-text-size-adjust: 100%; } */
/* body {
  margin: 0; background: var(--void); color: var(--paper);
  font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
canvas { display: block; } */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.arrow-ico { width: 1em; height: 1em; flex: none; transition: transform 0.45s var(--ease); }

/* 00 the DTR banner (components/sections/DtrBanner.jsx): the report's opening, its own type and black ground.
   The copy keeps the report's own layouts, in its pixels × --u: desktop on its 1440-wide 16:9 frame, tablets on a
   959-wide screen, phones on a 390-wide one. The whole layer sits just under the header (--top) */
@font-face { font-family: 'DTR Palmore'; src: url('https://zensciences.com/wp-content/themes/ultra-print-child/dtr/fonts/PalmoreLight.ttf') format('truetype'); font-weight: 300; font-display: swap; ascent-override: 70%; descent-override: 23.1%; line-gap-override: 0%; }
@font-face { font-family: 'DTR Inter'; src: url('https://zensciences.com/wp-content/themes/ultra-print-child/dtr/fonts/inter-latin-wght.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
.dtr { position: relative; z-index: 1; height: 100svh; overflow: hidden; background: #000; color: #fff; font-family: 'DTR Inter', system-ui, sans-serif; }
.dtr-loop { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dtr-frame {
  --fw: min(100vw, (100svh - var(--hdr-h)) * 16 / 9); --u: calc(var(--fw) / 1440);
  position: absolute; z-index: 2; left: 50%; translate: -50% 0; width: var(--fw); top: calc(var(--hdr-h) + 12px - 36 * var(--u));
}
.dtr-frame > * { position: absolute; margin: 0; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.dtr-rule { height: 1px; background: #fff; }
.dtr-rule-l { --x: 369; --y: 48; --w: 284; }
.dtr-rule-r { --x: 786; --y: 48; --w: 278; }
.dtr-rule-b { --x: 369; --y: 311; --w: 695; }
/* the rule under the title fades out across its middle, so the cat's face shows through */
.dtr-rule-b { -webkit-mask-image: linear-gradient(90deg, #000 24%, transparent 33%, transparent 67%, #000 76%); mask-image: linear-gradient(90deg, #000 24%, transparent 33%, transparent 67%, #000 76%); }
.dtr-eyebrow { --x: 661; --y: 36; --w: 118; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); text-transform: uppercase; text-align: center; white-space: nowrap; }
.dtr-title {
  --x: 239; --y: 74; --w: 962;
  font-family: 'DTR Palmore', 'Times New Roman', serif; font-weight: 300; font-size: calc(194.4 * var(--u)); line-height: calc(110.6 * var(--u));
  letter-spacing: calc(7.776 * var(--u)); text-align: center; text-transform: uppercase; white-space: nowrap;
}
.dtr-title span { display: block; }
/* leaving the banner (--p, 0 → 1 over its height, from DtrBanner.jsx): the film blurs, dims and lags behind the scroll
   (draining to black and white in the first third of the way) while the ground under it thins out to the world behind; the copy lifts off in layers, the eyebrow fastest, the
   title's lines a beat apart, then the rule and the button, each fading as it goes */
/* its foot dissolves into the next chapter instead of ending in a hard edge */
.dtr {
  --p: 0; background: rgb(0 0 0 / calc(1 - var(--p)));
  -webkit-mask-image: linear-gradient(#000 calc(100% - var(--p) * 70%), transparent);
  mask-image: linear-gradient(#000 calc(100% - var(--p) * 70%), transparent);
}
.dtr-loop { transform: translate3d(0, calc(var(--p) * 38%), 0) scale(calc(1 + var(--p) * 0.08)); filter: blur(calc(var(--p) * 22px)) brightness(calc(1 - var(--p) * 0.85)) grayscale(min(1, calc(var(--p) * 3))); opacity: max(0, calc(1 - var(--p) * var(--p) * 2.8)); will-change: transform, filter; }   /* gone by --p 0.6: past that its blurred stage lights would hang as soft blobs over the hero */
.dtr-eyebrow, .dtr-rule-l, .dtr-rule-r { transform: translate3d(0, calc(var(--p) * -62svh), 0); opacity: calc(1 - var(--p) * 1.8); }
.dtr-title .dtr-line-1 { transform: translate3d(0, calc(var(--p) * -48svh), 0); opacity: calc(1 - var(--p) * 1.5); }
.dtr-title .dtr-line-2 { transform: translate3d(0, calc(var(--p) * -36svh), 0); opacity: calc(1 - var(--p) * 1.35); }
.dtr-rule-b { transform: translate3d(0, calc(var(--p) * -26svh), 0); opacity: calc(1 - var(--p) * 1.3); }
.dtr-title, .dtr-eyebrow { filter: blur(calc(var(--p) * 6px)); }
.dtr-cta { transform: translate3d(0, calc(var(--p) * -14svh), 0); opacity: calc(1 - var(--p) * 1.25); }
p.dtr-eyebrow, .dtr-cta:active, .dtr-cta:hover{ color: var(--paper); }

/* the call to the report: dark glass, centred at the foot of the banner, and always catching the light —
   a bright arc runs round its rim (with a soft glow under it), a light in the brand colour (--signal, the Contact us pill) sweeps through the glass every few seconds,
   and as the sheen leaves, a four-point star flares on the rim; a second one answers on the opposite corner */
@property --dtr-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.dtr-cta {
  --cta-time: 4.8s;
  position: absolute; z-index: 4; left: 50%; bottom: 22svh; translate: -50% 0; isolation: isolate;   /* trial spot, over the cat's hips; it was clamp(28px, 6svh, 64px) at the foot */
  display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: 999px;
  color: #fff; font-size: 16px; letter-spacing: 0.01em; white-space: nowrap;
  box-shadow: 0 14px 44px -10px rgba(0, 0, 0, 0.9);
}
.dtr-cta-label { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.dtr-cta:hover .arrow-ico { transform: translateX(5px); }
/* the glass, with the sheen inside it */
.dtr-cta-face {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden;
  background: rgba(4, 4, 6, 0.84); -webkit-backdrop-filter: blur(22px) saturate(120%); backdrop-filter: blur(22px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: background 0.35s, box-shadow 0.35s;
}
/* hovered (or focused): the glass turns the brand pink, like the Contact us pill */
.dtr-cta:hover .dtr-cta-face, .dtr-cta:focus-visible .dtr-cta-face { background: var(--signal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 34px -8px color-mix(in srgb, var(--signal) 70%, transparent); }
.dtr-cta-face::before {
  content: ''; position: absolute; inset: -20% auto -20% 0; width: 55%; transform: translateX(-130%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 35%, transparent) 22%, var(--signal) 50%, color-mix(in srgb, var(--signal) 35%, transparent) 78%, transparent);
  filter: blur(5px); mix-blend-mode: screen;
  animation: dtr-sheen var(--cta-time) cubic-bezier(0.55, 0.1, 0.35, 1) infinite;
}
/* on the pink, the sweeping light turns white so it still shows */
.dtr-cta:hover .dtr-cta-face::before, .dtr-cta:focus-visible .dtr-cta-face::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.12) 75%, transparent); mix-blend-mode: normal; }
/* the bright arc running round the rim */
.dtr-cta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--dtr-a), transparent 0deg, transparent 230deg, rgba(255, 214, 170, 0.5) 280deg, #fff 318deg, rgba(255, 255, 255, 0.6) 332deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: dtr-orbit 3.6s linear infinite;
}
/* its glow: the same arc, blurred, just outside the rim */
.dtr-cta-halo {
  position: absolute; inset: -3px; z-index: -2; border-radius: inherit; pointer-events: none; filter: blur(9px); opacity: 0.75;
  background: conic-gradient(from var(--dtr-a), transparent 0deg, transparent 240deg, rgba(255, 196, 140, 0.55) 290deg, rgba(255, 255, 255, 0.9) 320deg, transparent 350deg);
  animation: dtr-orbit 3.6s linear infinite;
}
/* the star: a bright core with long thin rays, flaring and turning as it goes */
.dtr-cta-glint {
  position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; opacity: 0; transform: scale(0);
  background:
    radial-gradient(circle, #fff 0 2px, rgba(255, 255, 255, 0.85) 3px, rgba(255, 230, 200, 0.35) 7px, transparent 14px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) center / 100% 1.5px no-repeat,
    linear-gradient(transparent, rgba(255, 255, 255, 0.95) 50%, transparent) center / 1.5px 70% no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
  animation: dtr-glint var(--cta-time) ease-out infinite;
}
/* the diagonal rays: the same cross, turned and shorter */
.dtr-cta-glint::before {
  content: ''; position: absolute; inset: 22%; rotate: 45deg;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6) 50%, transparent) center / 100% 1px no-repeat,
    linear-gradient(transparent, rgba(255, 255, 255, 0.6) 50%, transparent) center / 1px 100% no-repeat;
}
.dtr-cta-glint-a { left: calc(100% - 22px); top: 3px; }
.dtr-cta-glint-b { left: 22px; top: calc(100% - 3px); animation-delay: calc(var(--cta-time) * 0.5); width: 44px; height: 44px; margin: -22px 0 0 -22px; }
@keyframes dtr-orbit { to { --dtr-a: 360deg; } }
@keyframes dtr-sheen {
  0% { transform: translateX(-130%) skewX(-20deg); }
  32%, 100% { transform: translateX(330%) skewX(-20deg); }
}
@keyframes dtr-glint {
  0%, 24% { opacity: 0; transform: scale(0) rotate(-45deg); }
  30% { opacity: 1; transform: scale(1.15) rotate(0deg); }
  36% { opacity: 0.9; transform: scale(0.85) rotate(20deg); }
  46%, 100% { opacity: 0; transform: scale(0) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dtr-cta::after, .dtr-cta-halo, .dtr-cta-face::before, .dtr-cta-glint { animation: none; }
  .dtr-cta::after, .dtr-cta-halo { --dtr-a: 40deg; }
}
@media (max-width: 1099.98px) {
  /* tablets: the report's 959-wide layout, over a shade at the top so the copy reads */
  .dtr::before { content: ''; position: absolute; inset: 0 0 auto; height: 70%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.7) 10%, transparent); }
  .dtr-frame { --u: calc(100vw / 959); left: 0; translate: none; width: 100%; top: calc(var(--hdr-h) + 12px - 75 * var(--u)); }
  .dtr-rule-b { -webkit-mask-image: none; mask-image: none; }
  .dtr-eyebrow { --x: 415; --y: 75; --w: 187; }
  .dtr-rule-l { --x: 153; --y: 87; --w: 272.9; }
  .dtr-rule-r { --x: 591.5; --y: 87; --w: 259.6; }
  .dtr-title { --x: 57; --y: 125; --w: 844.4; font-size: calc(150 * var(--u)); line-height: calc(110 * var(--u)); letter-spacing: calc(6 * var(--u)); }
  .dtr-rule-b { --x: 207.5; --y: 370; --w: 540; }
}
@media (max-width: 599.98px) {
  /* phones: the report's 390-wide layout */
  .dtr-frame { --u: calc(100vw / 390); top: calc(var(--hdr-h) + 12px - 70 * var(--u)); }
  .dtr-eyebrow { --x: 135; --y: 70; --w: 120; font-size: calc(14 * var(--u)); line-height: calc(24 * var(--u)); }
  .dtr-rule-l { --x: 20; --y: 82; --w: 107; }
  .dtr-rule-r { --x: 263; --y: 82; --w: 107; }
  .dtr-title { --x: 16; --y: 104; --w: 358; font-size: calc(78 * var(--u)); line-height: calc(58 * var(--u)); letter-spacing: calc(3 * var(--u)); }
  .dtr-rule-b { --x: 24; --y: 228; --w: 342; }
  .dtr-cta { height: 46px; padding: 0 22px; font-size: 15px; }
}

/* ── phone: the banner's copy keeps the place it has under the site's (shorter) header there */
@media (max-width: 760px) {
  :root { --hdr-h: 64px; }
}