/* ==========================================================================
   My Wix Designer - site styles
   Type: Raveo (SIL OFL 1.1, self-hosted). Palette: MWD mint on forest + paper.
   ========================================================================== */

@font-face { font-family: "Raveo"; src: url("../fonts/raveo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Raveo"; src: url("../fonts/raveo-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Raveo"; src: url("../fonts/raveo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Raveo Display"; src: url("../fonts/raveo-display-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* colour */
  --ink: #0f1512;            /* near-black, green bias */
  --forest: #121c16;         /* dark sections */
  --forest-2: #1a2820;       /* raised surface on dark */
  --paper: #f4f4f1;          /* page ground */
  --paper-2: #e9eae5;        /* recessed surface on paper */
  --card: #ffffff;
  --mint: #82f485;           /* MWD brand green */
  --mint-deep: #2f9e4c;      /* mint dot on light grounds */
  --mint-wash: #d9f8d6;

  /* secondary palette: one colour per pillar, mint stays the action colour */
  --gold: #f2c879;  --gold-deep: #94650f;  --gold-wash: #fbf0d8;    /* brand */
  --sky: #9cc9f5;   --sky-deep: #2b67a3;   --sky-wash: #e4f0fc;     /* messaging */
  --lilac: #c7a4f2; --lilac-deep: #6b43b0; --lilac-wash: #f0e8fc;   /* website */
  --coral: #f59e82; --coral-deep: #b4472a; --coral-wash: #fde8e0;   /* SEO */

  --ink-80: rgba(15, 21, 18, .8);
  --ink-64: rgba(15, 21, 18, .64);
  --ink-48: rgba(15, 21, 18, .62);   /* small muted text; darkened from .48 on 18 Oct so it passes WCAG AA contrast (4.5:1) */
  --ink-dim: rgba(15, 21, 18, .48);  /* the soft second half of big headings (large text only needs 3:1) */
  --ink-32: rgba(15, 21, 18, .32);
  --ink-12: rgba(15, 21, 18, .12);
  --ink-06: rgba(15, 21, 18, .06);

  --paper-64: rgba(244, 244, 241, .64);
  --paper-48: rgba(244, 244, 241, .56);   /* lightened from .48 on 18 Oct for contrast on dark grounds */
  --paper-dim: rgba(244, 244, 241, .48);
  --paper-24: rgba(244, 244, 241, .24);
  --paper-12: rgba(244, 244, 241, .12);

  /* type */
  --f-display: "Raveo Display", "Raveo", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Raveo", "Helvetica Neue", Arial, sans-serif;

  --t-h1: clamp(2.75rem, 1.6rem + 4.9vw, 5.75rem);
  --t-h2: clamp(2.125rem, 1.45rem + 2.8vw, 3.75rem);
  --t-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --t-h4: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --t-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-label: .6875rem;

  /* space + shape */
  --gutter: clamp(16px, 3.2vw, 40px);
  --maxw: 1560px;
  --sec: clamp(88px, 7vw + 40px, 168px);
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --header-h: 84px;
  --tile-gap: clamp(10px, 1vw, 14px);   /* the space between tiles in a grid of cards, site-wide */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -.012em;
  font-feature-settings: "ss01" 0, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 3px; border-radius: 6px; }
.section--dark :focus-visible, .cta :focus-visible { outline-color: var(--mint); }
::selection { background: var(--mint); color: var(--ink); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r); font-weight: 600;
}
.skip-link:focus { top: 12px; }
.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; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--sec); }
.section--tight { padding-block: calc(var(--sec) * .6); }
.section--flush-top { padding-top: 0; }
.section--dark { background: var(--forest); color: var(--paper); }
.section--white { background: var(--card); }

.head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 640px; margin-bottom: clamp(40px, 5vw, 72px); }
.head--center { align-items: center; text-align: center; margin-inline: auto; max-width: 820px; }
.head--split {
  max-width: none; display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 24px 48px;
}
.head--split > :first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 620px; }
/* two equal columns, so the right-hand text lines up with the right-hand card below it */
.head--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--tile-gap); }
.head--even > p { max-width: none; }
.head--row { max-width: none; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.head--row > :first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 640px; }

/* ---------- Type ---------- */
.h1, .h2, .h3 { font-family: var(--f-display); font-weight: 500; }
.h1 { font-size: var(--t-h1); line-height: .98; letter-spacing: -.045em; }
.h2 { font-size: var(--t-h2); line-height: 1; letter-spacing: -.04em; }
.h3 { font-size: var(--t-h3); line-height: 1.12; letter-spacing: -.025em; }
.h4 { font-family: var(--f-text); font-size: var(--t-h4); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.lead { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -.02em; }
.small { font-size: var(--t-small); line-height: 1.45; }
.muted { color: var(--ink-64); }
.section--dark .muted, .cta .muted { color: var(--paper-64); }
.h1 .dim, .h2 .dim { color: var(--ink-dim); }
.section--dark .h2 .dim, .cta .h2 .dim { color: var(--paper-dim); }
.measure { max-width: 34em; }
.tnum { font-variant-numeric: tabular-nums; }

/* eyebrow: a solid tag with tight corners, sentence case */
.pill {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border: 1px solid var(--mint); border-radius: var(--r-sm); background: var(--mint); color: var(--ink);
  font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
}
.pill--solid { background: var(--card); border-color: var(--ink-12); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--r-sm);
  font-size: .75rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.3;
  background: var(--paper-2); color: var(--ink);
}
.chip--mint { background: var(--mint); color: var(--ink); }
.chip--ink { background: var(--ink); color: var(--paper); }

/* ---------- Buttons (text-roll + arrow slide) ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 20px; border-radius: var(--r); background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 1rem; letter-spacing: -.02em; line-height: 1.5; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  isolation: isolate;
}
.btn--mint { --btn-bg: var(--mint); --btn-fg: var(--ink); }
.btn--paper { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; box-shadow: inset 0 0 0 1px var(--ink-32); }
.section--dark .btn--ghost, .cta .btn--ghost { box-shadow: inset 0 0 0 1px var(--paper-24); color: var(--paper); }
.btn--sm { padding: 8px 14px 8px 16px; font-size: .875rem; }
.btn:active { transform: scale(.98); }

.roll { position: relative; display: block; height: 1.5em; clip-path: inset(0 -.2em); } /* clip top and bottom only, so tight tracking never shaves the last letter */
.roll > span { display: block; transition: transform .5s var(--ease-out); }
.roll > span::after { content: attr(data-text); content: attr(data-text) / ""; display: block; }
.btn:hover .roll > span, .btn:focus-visible .roll > span,
.link:hover .roll > span, .link:focus-visible .roll > span,
.nav__link:hover .roll > span, .nav__link:focus-visible .roll > span { transform: translateY(-50%); }

.arr { position: relative; width: 14px; height: 14px; overflow: hidden; flex: none; }
.arr svg { position: absolute; inset: 0; width: 14px; height: 14px; transition: transform .5s var(--ease-out); }
.arr svg + svg { transform: translateX(-160%); }
.btn:hover .arr svg:first-child, .btn:focus-visible .arr svg:first-child,
.link:hover .arr svg:first-child, .link:focus-visible .arr svg:first-child { transform: translateX(160%); }
.btn:hover .arr svg + svg, .btn:focus-visible .arr svg + svg,
.link:hover .arr svg + svg, .link:focus-visible .arr svg + svg { transform: translateX(0); }

.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -.02em; padding: 11px 0; }   /* no side padding, so text links line up with the text above them */
.link--mint { color: var(--mint); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* buttons with some weight: a lit top edge, a soft drop shadow, and the
   arrow in its own key that changes colour as the button lifts */
.btn {
  --arr-bg: var(--mint); --arr-fg: var(--ink);
  padding: 7px 7px 7px 20px; gap: 14px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 2px rgba(15, 21, 18, .22), 0 8px 18px -10px rgba(15, 21, 18, .55);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn--mint { --arr-bg: var(--ink); --arr-fg: var(--mint);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(15, 21, 18, .14), 0 1px 2px rgba(15, 21, 18, .2), 0 10px 22px -10px rgba(47, 158, 76, .75); }
.btn--paper { --arr-bg: var(--ink); --arr-fg: var(--paper); }
.btn--ghost { --arr-bg: rgba(15, 21, 18, .08); --arr-fg: currentColor; background-image: none; box-shadow: inset 0 0 0 1px var(--ink-32); }
.section--dark .btn--ghost, .cta .btn--ghost { --arr-bg: rgba(244, 244, 241, .14); box-shadow: inset 0 0 0 1px var(--paper-24); }
.btn--sm { padding: 5px 5px 5px 15px; gap: 10px; }
.btn .arr { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--arr-bg); color: var(--arr-fg); transition: background-color .35s var(--ease), color .35s var(--ease), transform .45s var(--ease-out); }
.btn--sm .arr { width: 27px; height: 27px; }
.btn .arr svg { left: 50%; top: 50%; margin: -7px 0 0 -7px; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:not(.btn--ghost):hover, .btn:not(.btn--ghost):focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 2px 4px rgba(15, 21, 18, .18), 0 18px 30px -14px rgba(15, 21, 18, .6); }
.btn--mint:hover, .btn--mint:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(15, 21, 18, .14), 0 2px 4px rgba(15, 21, 18, .16), 0 18px 32px -12px rgba(47, 158, 76, .85) !important; }
.btn:hover .arr, .btn:focus-visible .arr { transform: scale(1.06); }
.btn:active { transform: translateY(0) scale(.98); }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .5s var(--ease-out);
}
.site-header.is-hidden { transform: translateY(calc(-100% - 8px)); }
.nav-outer { padding: 10px var(--gutter) 0; }
.nav {
  position: relative; max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  border-radius: var(--r-lg); padding: 10px 10px 10px 24px; color: var(--ink);
  background: rgba(246, 246, 243, .58);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 36px -20px rgba(15, 21, 18, .4);
}
.brand { display: inline-flex; align-items: center; width: 168px; color: var(--ink); }
.brand svg { width: 100%; height: auto; }
.nav__menu { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r);
  font-weight: 600; letter-spacing: -.02em; transition: background-color .25s var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { background: var(--ink-06); }
.nav__link .chev { width: 10px; height: 10px; transition: transform .3s var(--ease); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r); align-items: center; justify-content: center; }
.nav__toggle:hover { background: var(--ink-06); }
.burger { position: relative; width: 20px; height: 12px; }
.burger span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 0; } .burger span:nth-child(2) { top: 5px; } .burger span:nth-child(3) { top: 10px; }
.nav__toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--card); border-radius: var(--r-lg); padding: 32px;
  box-shadow: 0 24px 60px -24px rgba(15, 21, 18, .45);
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 300px; gap: 32px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.99); transform-origin: 50% 0;
  transition: opacity .25s var(--ease), transform .35s var(--ease-out), visibility 0s linear .35s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .35s var(--ease-out), visibility 0s; }
.mega__col { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.mega__list { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.mega__item { display: flex; gap: 14px; align-items: flex-start; padding: 10px 12px; margin-inline: -12px; border-radius: var(--r); transition: background-color .2s var(--ease); }
.mega__item:hover { background: var(--paper); }
.mega__icon { width: 36px; height: 36px; flex: none; border-radius: var(--r); background: var(--paper); display: grid; place-items: center; }
.mega__icon svg { width: 18px; height: 18px; }
.mega__item:hover .mega__icon { background: var(--mint); }
.mega__t { font-weight: 600; letter-spacing: -.02em; }
.mega__d { font-size: var(--t-small); color: var(--ink-64); }
.mega__price { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 0; border-bottom: 1px solid var(--ink-12); font-weight: 500; }
.mega__price span:last-child { color: var(--ink-64); font-variant-numeric: tabular-nums; }
.mega__price:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.mega__promo { display: flex; flex-direction: column; gap: 12px; }
.mega__promo-img { border-radius: var(--r); background: var(--paper-2); aspect-ratio: 16 / 9; overflow: hidden; }   /* the same shape as the tour frame, so nothing is cropped */
.mega__promo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.mega__promo:hover .mega__promo-img img { transform: scale(1.04); }
/* "All services" and "Compare packages": flush with the icons and text above, arrow on the text's middle */
.mega__more { padding: 6px 0; margin-top: 2px; font-size: .9375rem; line-height: 1.5; }
.mega__more .roll { height: 1.5em; }
.mega__more .arr { align-self: center; }
.mega__promo .u { font-weight: 600; font-size: var(--t-small); text-decoration: underline; text-underline-offset: 4px; }

.scrim {
  position: fixed; inset: 0; z-index: 999; background: rgba(15, 21, 18, .38);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.scrim.is-on { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }

/* mobile panel */
.mpanel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--card); border-radius: var(--r-lg);
  max-height: calc(100svh - 110px); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 24px 60px -24px rgba(15, 21, 18, .45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .35s var(--ease-out), visibility 0s linear .35s;
}
.mpanel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .35s var(--ease-out), visibility 0s; }
.mpanel__promo { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--paper-2); padding: 18px 20px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.mpanel__promo img { width: 112px; border-radius: var(--r-sm); }
.mpanel__body { padding: 8px 20px 20px; }
.mpanel__link { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--ink-12); font-weight: 500; font-size: 1.0625rem; }
.mpanel__link svg { width: 18px; height: 18px; color: var(--ink-48); }
.acc__btn { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 500; font-size: 1.0625rem; border-bottom: 1px solid var(--ink-12); text-align: left; }
.plus { position: relative; width: 14px; height: 14px; }
.plus::before, .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease); }
.plus::before { left: 0; right: 0; top: 6px; height: 2px; }
.plus::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.acc__btn[aria-expanded="true"] .plus::after { transform: scaleY(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__panel ul { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 14px; }
.acc__panel a { display: flex; justify-content: space-between; padding: 8px 0; color: var(--ink-80); }
.mpanel__foot { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.mpanel__foot .btn { justify-content: center; }

/* ---------- Reveal + parallax ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.px { position: relative; overflow: hidden; }
.px > img, .px > picture > img { position: absolute; left: 0; width: 100%; height: 120%; top: -10%; object-fit: cover; will-change: transform; }

/* ---------- HERO (light studio: the reel in a browser, with the four colours around it) ---------- */
.hero {
  position: relative; color: var(--ink); background: var(--paper);
  min-height: max(660px, min(100svh, 980px));
  display: flex; isolation: isolate; overflow: hidden;
}
.hero .wrap { display: flex; flex-direction: column; justify-content: center; width: 100%; padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px)); padding-bottom: clamp(48px, 5vw, 80px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(32px, 4.5vw, 80px); align-items: center; }
.hero__top { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__title { max-width: 11em; font-size: clamp(2.75rem, 1.5rem + 3.9vw, 5rem); }
.hero__sub { max-width: 30em; color: var(--ink-80); }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--ink-12); font-size: .9375rem; }

.hero__stage { position: relative; aspect-ratio: 1 / .92; }
.hbr { position: absolute; left: 7%; right: 3%; top: 9%; bottom: 17%; border-radius: var(--r-lg); background: #fff; overflow: hidden; border: 1px solid var(--ink-12);
  box-shadow: 0 2px 4px rgba(15, 21, 18, .06), 0 40px 80px -40px rgba(15, 21, 18, .45); display: flex; flex-direction: column; }
.hbr__bar { height: 38px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 14px; background: #f1f2ee; border-bottom: 1px solid var(--ink-12); }
.hbr__bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(15, 21, 18, .16); }
.hbr__url { margin-inline: auto; display: block; height: 24px; line-height: 24px; padding: 0 10px; border-radius: var(--r-sm); background: #fff; font-size: .75rem; color: var(--ink-64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hbr__url svg { display: inline-block; vertical-align: -1px; margin-right: 6px; width: 10px; height: 10px; color: var(--mint-deep); }
.hbr__vp { position: relative; flex: 1; min-height: 0; background: var(--forest); }
.hbr__vp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-sm); flex: none;
  background: #fff; border: 1px solid var(--ink-12); color: var(--ink); font-size: .75rem; font-weight: 600;
}
.video-toggle svg { width: 11px; height: 11px; }

/* the four colours, as cards floating round the reel */
.hchip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--ink-12);
  box-shadow: 0 24px 44px -24px rgba(15, 21, 18, .45); animation: hfloat 7s ease-in-out infinite; }
.hchip__k { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.hchip__k i { width: 10px; height: 10px; border-radius: 2px; background: var(--acc); }
.hchip--brand { --acc: var(--gold); left: 0; top: 0; }
.hchip--copy { --acc: var(--sky); right: 0; top: 34%; animation-delay: -2.5s; }
.hchip--seo { --acc: var(--coral); right: 9%; bottom: 3%; animation-delay: -4.5s; }
.hchip { border-top: 3px solid var(--acc); }
.hchip__sw { display: flex; gap: 5px; }
.hchip__sw b { width: 22px; height: 22px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(15, 21, 18, .08); }
.hchip__lines { display: flex; flex-direction: column; gap: 6px; width: 120px; }
.hchip__lines b { height: 6px; border-radius: 3px; background: var(--sky); }
.hchip__lines b:nth-child(1) { width: 100%; background: var(--ink); height: 8px; }
.hchip__lines b:nth-child(2) { width: 86%; opacity: .7; }
.hchip__lines b:nth-child(3) { width: 64%; opacity: .7; }
.hchip__rank { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: 1.125rem; letter-spacing: -.02em; white-space: nowrap; }
.hchip__rank svg { width: 15px; height: 15px; color: var(--coral-deep); }
@keyframes hfloat { 50% { transform: translateY(-8px); } }

/* the client quote sits on the reel's bottom-left corner */
.hero__quote { position: absolute; z-index: 3; left: 0; bottom: 0; width: min(330px, 62%); }
.hero__quote .glass { max-width: none; }

.fact { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.fact svg { width: 16px; height: 16px; color: var(--mint); flex: none; }
.glass {
  position: relative; max-width: 320px; padding: 16px 18px; border-radius: var(--r);
  background: rgba(255, 255, 255, .86); border: 1px solid var(--ink-12);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 30px 60px -30px rgba(15, 21, 18, .5);
  display: flex; flex-direction: column; gap: 14px;
}
.stars { display: flex; gap: 4px; color: var(--mint); }
.stars svg { width: 15px; height: 15px; }
.who { display: flex; align-items: center; gap: 10px; }
.who__av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; background: var(--paper-2); display: grid; place-items: center; font-weight: 600; font-size: .75rem; color: var(--ink); }
.who__av img { width: 100%; height: 100%; object-fit: cover; }
.who__n { font-weight: 600; font-size: .8125rem; line-height: 1.3; }
.who__r { font-size: .75rem; line-height: 1.3; color: var(--ink-64); letter-spacing: .02em; }
.section--dark .who__r { color: var(--paper-64); }

/* ---------- Work reel (marquee) ---------- */
.reel { padding-block: clamp(20px, 2.5vw, 32px) clamp(8px, 1vw, 16px); }
.reel__label { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.marquee { position: relative; overflow: hidden; padding-bottom: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 10px; animation: marquee var(--speed, 60s) linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--hg, 5px))); } } /* --hg: half the track's gap, so the loop is seamless */
.work { width: clamp(240px, 22vw, 340px); flex: none; display: flex; flex-direction: column; gap: 10px; }
.work__img { aspect-ratio: 5 / 4; border-radius: var(--r); overflow: hidden; background: #1b1c1d; }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.work:hover .work__img img { transform: scale(1.04); }
.work__cap { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-small); }
.work__cap span:first-child { font-weight: 600; }
.work__cap span:last-child { color: var(--ink-64); }
.work__cap span:last-child::before { content: "/"; margin-right: 8px; color: var(--ink-32); }
/* QA18 finding 3: a long name and its category wrap as whole pieces (the category drops below), not word by word into two ragged columns */
.work__cap { flex-wrap: wrap; row-gap: 2px; }
.work__cap span { white-space: nowrap; }

/* names marquee (about) */
.names__track { --hg: 24px; display: flex; width: max-content; align-items: center; gap: 48px; animation: marquee var(--speed, 40s) linear infinite; }
.names__item { font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -.03em; color: var(--ink-48); white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.names__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-32); }

/* ---------- Feature list (title | body cards) ---------- */
.flist { display: flex; flex-direction: column; gap: var(--tile-gap); }
.frow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px 48px;
  background: var(--card); border-radius: var(--r); padding: clamp(24px, 2.6vw, 40px);
}
.frow__t { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.frow__t .h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -.03em; }
.frow__b { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -.02em; color: var(--ink-80); }
.frow__k { font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink-48); }

/* ---------- The three phases: one card each, the same shape every time ---------- */
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); counter-reset: none; }
.phase { position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); overflow: hidden; }
.phase--us { outline: 1.5px solid color-mix(in srgb, var(--mint-deep) 55%, transparent); outline-offset: -1.5px; }
.phase__art { position: relative; aspect-ratio: 440 / 300; background: var(--acc-wash); overflow: hidden; container-type: inline-size; --u: calc(100cqw / 440);
  --i: #0f1512; --i2: rgba(15, 21, 18, .64); --i3: rgba(15, 21, 18, .45); --i4: rgba(15, 21, 18, .14); --ln: rgba(15, 21, 18, .1); --ln2: rgba(15, 21, 18, .18);
  --m: #82f485; --md: #2f9e4c; --g: #f2c879; --s: #9cc9f5; --l: #c7a4f2; --c: #f59e82; }
.phase__art .br { position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 30); width: calc(var(--u) * 392); height: calc(var(--u) * 252);
  transition: transform .8s var(--ease-out); }
.phase:hover .phase__art .br { transform: translateY(calc(var(--u) * -6)); }
.phase__art p, .phase__art b { margin: 0; }
.phase__art .br__url .lock { width: calc(var(--u) * 7); }
.phase__art--sys .br { left: calc(var(--u) * 54); top: calc(var(--u) * 46); width: calc(var(--u) * 340); height: calc(var(--u) * 222); }
.phase__art--sys .br__vp > .nw { transform: scale(.867); transform-origin: 0 0; width: calc(100% / .867); height: calc(100% / .867); }
.phase__guide { position: absolute; left: calc(var(--u) * 18); top: calc(var(--u) * 18); width: calc(var(--u) * 150); height: calc(var(--u) * 200); border-radius: calc(var(--u) * 6);
  background: #fff; border: 1px solid var(--ln2); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(15, 21, 18, .12); transform: rotate(-5deg); }
.phase__aa { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 10); font: 500 calc(var(--u) * 34) / 1 var(--f-display); letter-spacing: -.04em; color: var(--ink); }
.phase__sw { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 56); display: flex; gap: calc(var(--u) * 4); }
.phase__sw i { width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(15, 21, 18, .08); }
.phase__ln { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 84); display: flex; flex-direction: column; gap: calc(var(--u) * 5); width: calc(var(--u) * 80); }
.phase__ln i { height: calc(var(--u) * 4); border-radius: 2px; background: var(--i4); }
.phase__phone { position: absolute; right: calc(var(--u) * 20); bottom: calc(var(--u) * 14); width: calc(var(--u) * 78); height: calc(var(--u) * 150); border-radius: calc(var(--u) * 12);
  background: #fff; border: calc(var(--u) * 4) solid #121c16; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 26) rgba(15, 21, 18, .25); display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 10) calc(var(--u) * 7); }
.phase__phone i { height: calc(var(--u) * 46); border-radius: calc(var(--u) * 4); background: #121c16; }
.phase__phone b { height: calc(var(--u) * 16); border-radius: calc(var(--u) * 3); border: 1px solid var(--ln); background: #fff; }
.phase__phone b:first-of-type { width: 60%; height: calc(var(--u) * 9); border: 0; background: var(--coral); }
.phase__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 28px); flex: 1; }
.phase__head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.phase__n { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--acc); font-family: var(--f-display); font-size: 1rem; }
.phase__k { font-size: .8125rem; font-weight: 600; color: var(--ink-48); }
.phase__tag { margin-left: auto; }
.phase__d { color: var(--ink-64); }
@media (min-width: 992px) { .phase__d { min-height: 2.9em; } }
.phase__spec { margin: 6px 0 0; display: flex; flex-direction: column; }
.phase__spec div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ink-12); font-size: var(--t-small); }
.phase__spec dt { color: var(--ink-48); }
.phase__spec dd { margin: 0; font-weight: 600; }
.phases__note { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--ink-64); }
.phases__note .link { padding-block: 4px; color: var(--ink); }
@media (max-width: 991px) {
  .phases { grid-template-columns: minmax(0, 1fr); }
  .phases__note { max-width: none; }
}
.spec { display: flex; flex-direction: column; }
.spec div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ink-12); font-size: var(--t-small); }
.spec dt { color: var(--ink-64); }
.spec dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Split (why Ryan) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); }
.split__media { border-radius: var(--r); min-height: 720px; }
/* the phase journey artwork behind Ryan's three phases (partials/art-journey.html) */
.split__media--art { position: relative; overflow: hidden; background: #f3f2ec; }
.split__media--art .aj { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.aj__p, .aj__lift { transform-box: fill-box; transform-origin: center; }
.aj__lift { transition: transform .8s var(--ease-out), opacity .6s var(--ease); }
.aj__p1 { animation: aj-float 7s ease-in-out infinite; }
.aj__p2 { animation: aj-float 8.5s ease-in-out -2s infinite; }
.aj__p3 { animation: aj-float 9.5s ease-in-out -5s infinite; }
@keyframes aj-float { 50% { transform: translateY(-7px); } }
/* the tile for the phase that's lit lifts a little */
.split__media--art:has(.is-journey) .aj__lift { opacity: .78; }
.split__media--art:has(.ghost:nth-child(1).ghost--on) .aj__p1 .aj__lift,
.split__media--art:has(.ghost:nth-child(2).ghost--on) .aj__p2 .aj__lift,
.split__media--art:has(.ghost:nth-child(3).ghost--on) .aj__p3 .aj__lift { opacity: 1; transform: translateY(-10px) scale(1.04); }
/* the phase cards sit on a light artwork, so they read as light glass */
.split__media--art .ghost { background: rgba(255, 255, 255, .55); border-color: rgba(15, 21, 18, .08); color: var(--ink); }
.split__media--art .ghost__dot { background: rgba(15, 21, 18, .07); }
.split__media--art .ghost__txt small { color: var(--ink-64); }
.split__media--art .ghost--on { background: var(--card); box-shadow: 0 24px 50px -24px rgba(15, 21, 18, .35); }
.split__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 24px; }
.ghost {
  display: flex; align-items: center; gap: 14px; width: min(400px, 88%);
  padding: 12px 22px 12px 12px; border-radius: var(--r);
  background: rgba(15, 21, 18, .5); border: 1px solid rgba(244, 244, 241, .18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--paper);
}
.ghost__dot { width: 48px; height: 48px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: rgba(244, 244, 241, .14); font-family: var(--f-display); font-size: 1.125rem; }
.ghost__txt { display: flex; flex-direction: column; gap: 2px; }
.ghost__txt b { font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.ghost__txt small { font-size: .75rem; font-weight: 500; letter-spacing: 0; color: var(--paper-64); }
.ghost--on { background: var(--card); color: var(--ink); border-color: transparent; width: min(440px, 94%); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55); }
.ghost--on .ghost__dot { background: var(--mint); }
.ghost--on .ghost__txt small { color: var(--ink-64); }
.split__body { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.split__top { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 560px; }
.steps { display: flex; flex-direction: column; width: 100%; }
.steps li { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ink-12); }
.steps li:last-child { border-bottom: 1px solid var(--ink-12); }
.steps .chip { justify-self: start; align-self: start; margin-top: 2px; }

.quote {
  background: var(--card); border-radius: var(--r); padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 22px;
}
.quote__mark { width: 22px; color: var(--ink-48); }
.quote__text { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.3; letter-spacing: -.025em; font-weight: 500; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--tile-gap); }
.bento__card { background: var(--card); border-radius: var(--r); padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; justify-content: flex-start; gap: 40px; min-height: 300px; }   /* headings line up across a row (QA 18 Oct) */
.bento__card--tall { grid-row: span 2; padding: 0; overflow: hidden; background: color-mix(in srgb, var(--mint) 14%, #fff); color: var(--ink); gap: 0; }
.bento__card--tall .chip--mint { background: var(--ink); color: var(--mint); }
.bento__card--tall .bento__img { flex: 1 1 auto; min-height: 280px; position: relative; margin: 10px 10px 0; border-radius: var(--r-sm); overflow: hidden; }
.bento__card--tall .bento__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a device mockup on a flat background: show all of it, and let the matching colour fill the frame */
.bento__card--tall .bento__img--fit { background: var(--shot-bg); }
.bento__card--tall .bento__img--fit img { object-fit: contain; }
.bento__card--tall .bento__txt { padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.icon-tile { width: 60px; height: 60px; border-radius: var(--r); background: var(--paper); display: grid; place-items: center; }
.icon-tile svg { width: 28px; height: 28px; color: var(--ink); }
.bento__txt { display: flex; flex-direction: column; gap: 10px; }
.bento__txt .h4 + p { color: var(--ink-64); }
.ticks { display: flex; flex-direction: column; gap: 8px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.ticks svg { width: 16px; height: 16px; margin-top: 3px; color: var(--mint-deep); }
.bento__card--tall .ticks svg { color: var(--mint-deep); }
.bento__card--tall .ticks li { color: var(--ink-80); }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); align-items: stretch; }
.plan { background: var(--card); border-radius: var(--r); padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 24px; }
.plan--pop { background: color-mix(in srgb, var(--mint) 14%, #fff); color: var(--ink); outline: 1.5px solid color-mix(in srgb, var(--mint-deep) 55%, transparent); outline-offset: -1.5px; }
.plan--pop .chip--mint { background: var(--ink); color: var(--mint); }
.plan__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 26px; }
.plan__name { font-size: var(--t-h4); font-weight: 600; letter-spacing: -.02em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__price small { font-size: var(--t-small); color: var(--ink-64); font-weight: 500; }
.plan--pop .plan__price small, .plan--pop .plan__fit, .plan--pop .plan__plus { color: var(--ink-64); }
.plan__amt { font-family: var(--f-display); font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__fit { color: var(--ink-64); min-height: 3em; }
.plan hr { border: 0; border-top: 1px solid var(--ink-12); margin: 0; }
.plan--pop hr { border-color: color-mix(in srgb, var(--mint-deep) 25%, transparent); }
.plan__plus { font-size: var(--t-small); font-weight: 600; color: var(--ink-64); }
.plan .ticks { flex: 1 1 auto; }
.plan--pop .ticks svg { color: var(--mint-deep); }
.plan__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.plan__time { font-size: var(--t-small); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.plan__time svg { width: 16px; height: 16px; }
.seo-strip {
  margin-top: 8px; background: var(--paper-2); border-radius: var(--r); padding: 22px clamp(22px, 2.4vw, 36px);
  display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap;
}
.seo-strip__t { display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.seo-strip__prices { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-strip__prices span { background: var(--card); border-radius: var(--r); padding: 8px 14px; font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.seo-strip__prices b { font-weight: 600; }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: step; }
.pstep { position: relative; padding: 24px 22px 28px; border-radius: var(--r); background: var(--forest-2); display: flex; flex-direction: column; gap: 40px; }
.pstep__n { font-family: var(--f-display); font-size: 3rem; line-height: 1; letter-spacing: -.05em; color: var(--mint); font-variant-numeric: tabular-nums; }
.pstep__t { font-weight: 600; letter-spacing: -.02em; font-size: 1.0625rem; margin-bottom: 6px; }
.pstep p { color: var(--paper-64); font-size: var(--t-small); }
.pstep::after {
  content: ""; position: absolute; right: -8px; top: 46px; width: 8px; height: 1px; background: var(--paper-24);
}
.pstep:last-child::after { display: none; }

/* ---------- Case studies carousel ---------- */
.cases { position: relative; }
.cases__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 30vw, 440px); gap: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-bottom: 6px;
  scrollbar-width: none;
}
.cases__rail::-webkit-scrollbar { display: none; }
.case { scroll-snap-align: start; background: var(--forest-2); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.case__img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.case__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.case:hover .case__img img { transform: scale(1.04); }
.case__client { position: absolute; left: 14px; top: 14px; }
.case__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.case__t { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.025em; font-weight: 500; }
.case__body p { color: var(--paper-64); font-size: var(--t-small); }
.case__stat { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--paper-12); display: flex; align-items: baseline; gap: 10px; }
.case__stat b { font-family: var(--f-display); font-weight: 500; font-size: 1.625rem; letter-spacing: -.04em; color: var(--mint); white-space: nowrap; }
.case__stat span { font-size: var(--t-small); color: var(--paper-64); }
.cases__nav { display: flex; gap: 8px; }
.round {
  width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--forest-2); color: var(--paper); transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s;
}
.round:hover { background: var(--mint); color: var(--ink); }
.round:disabled { opacity: .35; pointer-events: none; }
.round svg { width: 16px; height: 16px; }

/* ---------- Proof (visual testimonial) ---------- */
.proof { background: linear-gradient(180deg, var(--mint-wash) 0%, var(--paper) 70%); }
.proof__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.proof__card { position: relative; border-radius: var(--r); min-height: 560px; display: flex; align-items: stretch; padding: 16px; }
.proof__card .quote { position: relative; z-index: 2; width: min(380px, 100%); justify-content: space-between; }
.proof__stat {
  position: relative; z-index: 2; margin: auto; width: min(320px, 100%);
  background: var(--card); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 48px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
}
.proof__stat .icon-tile { width: 48px; height: 48px; background: var(--paper); }
.proof__stat .icon-tile svg { width: 22px; height: 22px; }
.photo-tag {
  position: absolute; z-index: 2; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: var(--r); background: rgba(15, 21, 18, .55); color: var(--paper);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--t-small); font-weight: 500;
}
.photo-tag .chip { background: var(--mint); }
.bignum { font-family: var(--f-display); font-size: clamp(3.5rem, 2.5rem + 3vw, 5.25rem); line-height: .95; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }

/* ---------- CTA ---------- */
.cta { background: var(--forest); color: var(--paper); overflow: hidden; position: relative; isolation: isolate; }
.cta::before {
  content: ""; position: absolute; inset: auto -10% -40% -10%; height: 90%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 100%, rgba(130, 244, 133, .22), transparent 70%);
}
.cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; max-width: 860px; margin-inline: auto; }
.cta__sig { display: flex; align-items: center; gap: 12px; }
.cta__sig img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.cta__sig b { display: block; font-weight: 600; }
.cta__sig span { display: block; color: var(--paper-64); font-size: var(--t-small); }
.email {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: var(--r);
  border: 1px solid var(--paper-24); font-weight: 500; user-select: all;
}
.email button { user-select: none; padding: 6px 12px; border-radius: var(--r-sm); background: var(--paper-12); font-size: .8125rem; font-weight: 600; color: var(--paper); }
.email button:hover { background: var(--mint); color: var(--ink); }

/* ---------- Footer ---------- */
.footer { background: var(--paper-2); padding-top: clamp(56px, 6vw, 88px); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
.footer__about { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
.footer__about .brand { width: 170px; }
.footer h3 { font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink-48); margin-bottom: 14px; }
.footer__links { display: flex; flex-direction: column; gap: 8px; }
.footer__links a { font-weight: 500; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__legal { display: flex; flex-direction: column; gap: 10px; font-size: .8125rem; color: var(--ink-64); }
.footer__legal p + p { margin-top: 0; }
.footer__mark { margin-top: clamp(40px, 5vw, 72px); color: rgba(15, 21, 18, .07); padding-inline: var(--gutter); max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; }
.footer__mark svg { width: 100%; height: auto; margin-bottom: -1.2%; }

/* ==========================================================================
   About page
   ========================================================================== */
.ahero { padding-top: calc(var(--header-h) + clamp(56px, 7vw, 112px)); padding-bottom: clamp(72px, 7vw, 120px); }
.ahero__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 900px; margin-inline: auto; }
.ahero__sub { max-width: 34em; color: var(--ink-80); }
.newlink {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--ink-12); font-size: .8125rem; font-weight: 500;
  transition: border-color .25s var(--ease);
}
.newlink:hover { border-color: var(--ink-32); }
.newlink .chip { background: var(--ink); color: var(--paper); }
.newlink svg { width: 14px; height: 14px; color: var(--ink-48); }
.ahero__names { max-width: 760px; margin: 40px auto 48px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair__img { border-radius: var(--r); height: clamp(320px, 36vw, 560px); }
.float-card {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(380px, calc(100% - 32px)); background: var(--card); border-radius: var(--r); padding: 22px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 14px;
}
.tl { display: flex; flex-direction: column; }
.tl li { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--ink-12); font-size: var(--t-small); }
.tl li b { font-weight: 600; }
.tl li span:last-child { color: var(--ink-64); text-align: right; font-variant-numeric: tabular-nums; }

.story .frow__t .h3 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); }
.year { font-family: var(--f-display); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }

.how { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.how__card { border-radius: var(--r); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 28px; background: var(--card); }
.how__card--dark { background: var(--forest); color: var(--paper); }
.how__card .ticks li { font-size: var(--t-lead); letter-spacing: -.02em; }
.how__card--dark .ticks svg { color: var(--mint); }
.how__note { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 22px clamp(24px, 2.6vw, 40px); background: var(--paper-2); border-radius: var(--r); }

.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.member { background: var(--card); border-radius: var(--r); padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 20px; }
.member__img { aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: var(--ink); display: grid; place-items: center; }
.member__img img { width: 88%; height: 88%; object-fit: contain; filter: grayscale(1) contrast(1.02); transition: transform .8s var(--ease-out); }
.member:hover .member__img img { transform: scale(1.03); }
.member__txt { padding-inline: 12px; display: flex; flex-direction: column; gap: 8px; }
.member__role { font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink-48); }
.member__txt p { color: var(--ink-64); }

.creds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }   /* a tidy row, not 4 + 1 (QA 18 Oct) */
@media (max-width: 1179px) { .creds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .creds { grid-template-columns: minmax(0, 1fr); } }
.cred { display: flex; align-items: center; gap: 18px; }
.cred .icon-tile { background: var(--card); width: 56px; height: 56px; }
.cred .icon-tile svg { width: 24px; height: 24px; }
.cred__t { display: flex; flex-direction: column; }
.cred__t b { font-weight: 600; letter-spacing: -.02em; }
.cred__t small { color: var(--ink-64); font-size: var(--t-small); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .hero__quote { width: min(290px, 56%); }
  .hero__quote .glass__q { font-size: .875rem; }
  .hchip--copy { display: none; }
  .hchip--brand { top: 21%; }
  .nav__menu .nav__link { padding-inline: 11px; }
  .mega { grid-template-columns: 1.3fr 1fr 1fr; }
  .mega__promo { display: none; }
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pstep::after { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { max-width: 640px; width: 100%; margin-inline: auto; }
  :root { --header-h: 76px; }
  .nav { grid-template-columns: 1fr auto; padding-left: 18px; }
  .nav__menu, .nav__end .btn { display: none; }
  .nav__toggle { display: inline-flex; }
  .mega { display: none; }
  .head--split { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__media { min-height: 0; height: 520px; }
  .split__body { gap: 40px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__card--tall { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; order: -1; }
  .bento__card--tall .bento__img { min-height: 340px; margin: 10px 0 10px 10px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .seo-strip { max-width: none; }
  .plan__fit { min-height: 0; }
  .proof__grid { grid-template-columns: minmax(0, 1fr); }
  .proof__card { min-height: 520px; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .brand { width: 140px; }
  .hero__facts { gap: 10px 20px; }
  .video-toggle { padding: 0 8px; }
  .video-toggle [data-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* hidden on phones but still read out */
  .hero__stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; }
  .hbr { position: relative; inset: auto; aspect-ratio: 4 / 3.2; margin: 26px 4px 0; }
  .hchip { padding: 9px 11px; gap: 7px; }
  .hchip__k { font-size: .75rem; }
  .hchip__sw b { width: 16px; height: 16px; }
  .hchip__lines { width: 84px; }
  .hchip__rank { font-size: .9375rem; }
  .hero__stage { container-type: inline-size; }
  .hchip--brand { left: -4px; top: 84px; }
  .hchip--seo { right: 12px; bottom: auto; top: calc(26px + (100cqw - 8px) * .8 - 72px); }
  .hchip--copy { display: none; }
  .hero__quote { position: relative; left: auto; bottom: auto; width: 100%; }
  .frow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__card { min-height: 0; gap: 28px; }
  .bento__card--tall { display: flex; }
  .bento__card--tall .bento__img { min-height: 300px; margin: 10px 10px 0; }
  .process { grid-template-columns: 1fr 1fr; }
  .pstep { gap: 24px; }
  .pstep__n { font-size: 2.25rem; }
  .split__media { height: 440px; }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .creds { justify-content: flex-start; }
}

@media (max-width: 479px) {
  .process { grid-template-columns: minmax(0, 1fr); }
  .proof__card { min-height: 380px; }
  .proof__card--photo { min-height: 0; flex-direction: column; justify-content: flex-end; padding: 12px; padding-top: 260px; }
  .proof__card .quote { width: 100%; }
  .proof__card--stat { min-height: 420px; }
  .split__media { height: 380px; }
  .ghost { padding: 8px 16px 8px 8px; gap: 10px; }
  .ghost__dot { width: 38px; height: 38px; font-size: 1rem; }
  .mpanel__promo img { width: 88px; }
  .glass { max-width: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marquee__track, .names__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .names__track { gap: 10px 36px; }
  .names__item::after { display: none; }   /* the dots only make sense as a moving line */
  .footer__track { row-gap: 14px; padding-inline: 16px; }
  .footer__track li { padding-right: 0; margin-inline: clamp(12px, 2vw, 24px); }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee [aria-hidden="true"].dup { display: none; }
  .px > img { top: 0; height: 100%; transform: none !important; }
}

/* =====================================================================
   CMS-driven content (Wix Results / Testimonials / Services)
   ===================================================================== */
.who__n, .who__r { display: block; }

/* Testimonial highlights: the words picked out in the Wix rich text read at full strength */
.glass__q { font-size: .9375rem; font-weight: 500; line-height: 1.45; color: var(--ink); }
.glass__q:has(.hl) { color: var(--ink-64); }
.glass__q .hl { color: var(--ink); }
.quote__text { color: var(--ink); }
.quote__text:has(.hl) { color: var(--ink-64); }
.quote__text .hl { color: var(--ink); }
.quote__top { display: flex; flex-direction: column; gap: 22px; }

/* Services */
.bento__txt .h4 + .bento__sub { color: var(--ink); font-weight: 500; font-size: var(--t-small); letter-spacing: -.01em; }
.bento__sub + p { color: var(--ink-64); }

/* Case study cards */
.case__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.case__link:focus-visible { outline-offset: -3px; border-radius: var(--r); }
.case__t .dim { color: var(--paper-48); }
.case__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--paper-12); display: flex; flex-direction: column; gap: 14px; }
.case__foot .case__stat { margin: 0; padding: 0; border: 0; }
.case__body .case__meta { color: var(--paper-48); letter-spacing: .01em; }
.case__more { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--t-small); color: var(--mint); letter-spacing: -.01em; }
.case__link:hover .arr svg:first-child, .case__link:focus-visible .arr svg:first-child { transform: translateX(160%); }
.case__link:hover .arr svg + svg, .case__link:focus-visible .arr svg + svg { transform: translateX(0); }
.work__link { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.work__link:focus-visible { outline-offset: 4px; border-radius: var(--r); }

/* Case study page */
.chero .ahero__top { max-width: 1040px; }
.chero__title { text-wrap: balance; }
.cmeta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(48px, 6vw, 88px) 0 clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12);
}
.cmeta > div { padding: 20px 20px 22px 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cmeta > div + div { padding-left: 20px; border-left: 1px solid var(--ink-12); }
.cmeta dt { font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink-48); }
.cmeta dd { margin: 0; font-weight: 500; letter-spacing: -.015em; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.cmeta dd span { font-weight: 400; color: var(--ink-64); font-size: var(--t-small); letter-spacing: 0; }
.cmeta a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-32); transition: text-decoration-color .25s var(--ease); }
.cmeta a:hover { text-decoration-color: currentColor; }
.pair__img--dark { background: #1b1c1d; }

.p2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.p2__main { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.p2__text { color: var(--paper-64); max-width: 34em; }
/* ---------- Case study: the homepage's studio look ---------- */
.hero--case { min-height: 0; }
.hero--case .hero__title { font-size: clamp(2.5rem, 1.4rem + 3vw, 4.25rem); max-width: 12em; }
.hero--case .wrap { padding-bottom: clamp(56px, 6vw, 96px); }
.hbr__live { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-sm); background: var(--mint); font-size: .75rem; font-weight: 700; flex: none; }
.hbr__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: mo-rec 1.6s ease-in-out infinite; }
.hbr__vp--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the client's site wipes in once the browser lands */
.js .hero--case .hbr__vp--img img { clip-path: inset(0 100% 0 0); transform: scale(1.06); transition: clip-path 1.3s var(--ease-out) .45s, transform 1.8s var(--ease-out) .45s; }
.js .hero--case .hero__stage.is-in .hbr__vp--img img { clip-path: inset(0 0 0 0); transform: none; }
.hchip--scope .hchip__bar { display: flex; gap: 3px; width: 150px; height: 10px; }
.hchip__bar b { border-radius: 2px; background: var(--acc); }
.hchip__n { font-size: .8125rem; color: var(--ink-64); }
.hchip--phase { --acc: var(--mint); }
.hchip__ph { display: flex; gap: 6px; }
.hchip__ph b { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--f-display); font-weight: 500; background: var(--paper); color: var(--ink-48); }
.hchip__ph b.on { background: var(--mint); color: var(--ink); }
.cfacts { margin: 8px 0 0; width: 100%; max-width: 520px; display: flex; flex-direction: column; }
.cfact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--ink-12); }
.cfact:last-child { border-bottom: 1px solid var(--ink-12); }
.cfact dt { font-size: var(--t-small); color: var(--ink-48); }
.cfact dd { margin: 0; font-weight: 600; line-height: 1.35; min-width: 0; }
.cfact dd a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 479px) { .cfact { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; } }
.cfact dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-32); }
.cfact dd a:hover { text-decoration-color: currentColor; }

/* the new site, framed, beside the story */
.showcase { margin: 0; padding: 12px; border-radius: var(--r-lg); background: var(--lilac-wash); border: 1px solid var(--ink-12); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 40px 80px -50px rgba(15, 21, 18, .45); }
.showcase__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 4px 0; }
.showcase__k { font-size: .8125rem; color: var(--ink-48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.showcase__k b { color: var(--ink); font-weight: 600; }
.showcase__live { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-sm); background: var(--mint); font-size: .75rem; font-weight: 700; flex: none; }
.showcase__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.showcase__img { position: relative; aspect-ratio: 4 / 3.3; border-radius: var(--r); overflow: hidden; background: var(--forest); }
.showcase__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.showcase:hover .showcase__img img { transform: scale(1.03); }
.showcase__cap { font-size: var(--t-small); color: var(--ink-64); padding: 0 4px 2px; }

/* what we delivered, colour-coded like the four services */
.p2--light .p2__text { color: var(--ink-80); }
.deliv { background: var(--card); border: 1px solid var(--ink-12); border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 40px 80px -50px rgba(15, 21, 18, .4); }
.deliv__legend { display: flex; flex-wrap: wrap; gap: 6px; }
.deliv__legend span { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: var(--r-sm); background: var(--acc-wash); font-size: .8125rem; font-weight: 600; }
.deliv__legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--acc); }
.deliv__legend b { color: var(--acc-deep); }
.deliv__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dl { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--ink-12); }
.dl i { width: 12px; height: 12px; border-radius: 3px; background: var(--acc); }
.dl span { font-weight: 500; }
.dl small { font-size: .75rem; font-weight: 600; color: var(--acc-deep); }
.js .deliv.is-in .dl { animation: dl-in .6s var(--ease-out) both; }
.js .deliv.is-in .dl:nth-child(2) { animation-delay: .06s; } .js .deliv.is-in .dl:nth-child(3) { animation-delay: .12s; }
.js .deliv.is-in .dl:nth-child(4) { animation-delay: .18s; } .js .deliv.is-in .dl:nth-child(5) { animation-delay: .24s; }
.js .deliv.is-in .dl:nth-child(6) { animation-delay: .3s; } .js .deliv.is-in .dl:nth-child(7) { animation-delay: .36s; }
.js .deliv.is-in .dl:nth-child(8) { animation-delay: .42s; } .js .deliv.is-in .dl:nth-child(n+9) { animation-delay: .48s; }
@keyframes dl-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.p2__side { background: var(--forest-2); border-radius: var(--r); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.p2__side .frow__k { color: var(--paper-48); }
.p2__side .ticks li { color: var(--paper); }
.section--dark .ticks svg { color: var(--mint); }

.shots { display: flex; gap: 8px; }
.shot { flex: none; height: clamp(280px, 34vw, 520px); max-width: calc(100vw - 2 * var(--gutter)); border-radius: var(--r); overflow: hidden; background: var(--paper-2); scroll-snap-align: start; }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Brand card: each client's logo in its colourways, beside its palette ---------- */
.shot--kit { width: calc(clamp(280px, 34vw, 520px) * 1.8); max-width: calc(100vw - 2 * var(--gutter)); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-12); }
.kit { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); height: 100%; }
/* QA 18 Oct: a 1px edge over the whole card, so a pale base colour (BFC) doesn't melt into the page */
.shot--kit { position: relative; }
.shot--kit::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 1px solid var(--ink-12); border-radius: inherit; pointer-events: none; }
.kit__stage { position: relative; overflow: hidden; container-type: size; --cfg: var(--ink); }
.kit__way { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); opacity: 0; transition: opacity .9s var(--ease); }
.kit__way.on { opacity: 1; }
.kit__frame { position: relative; width: 58%; display: grid; place-items: center; padding: 7cqh 6%; transform: scale(.94); transition: transform 1.3s var(--ease-out); }
.kit__way.on .kit__frame { transform: none; }
/* clear-space guide, like a page from the brand guidelines */
.kit__frame::before { content: ""; position: absolute; inset: 0; border: 1px dashed var(--fg); opacity: 0; transition: opacity .8s var(--ease) .4s; }
.kit__frame::after { content: "x"; position: absolute; left: 0; top: 0; width: 7cqh; height: 7cqh; display: grid; place-items: center; font: 600 clamp(9px, 2.2cqh, 12px) / 1 var(--f-text); color: var(--fg); opacity: 0; border-right: 1px dashed var(--fg); border-bottom: 1px dashed var(--fg); transition: opacity .8s var(--ease) .6s; }
.kit__way.on .kit__frame::before { opacity: .32; }
.kit__way.on .kit__frame::after { opacity: .5; }
.kit__logo, .shot img.kit__logo { display: block; width: 100%; height: auto; max-height: 26cqh; object-fit: contain; aspect-ratio: var(--ar); }
.kit__mask { display: block; width: 100%; max-height: 26cqh; aspect-ratio: var(--ar); background: var(--fg);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.kit__top, .kit__cap { position: absolute; left: 16px; right: 16px; z-index: 2; color: var(--cfg); transition: color .9s var(--ease); font-size: .75rem; font-weight: 600; }
.kit__top { top: 14px; display: flex; justify-content: space-between; letter-spacing: .01em; }
.kit__n { font-variant-numeric: tabular-nums; }
.kit__cap { bottom: 12px; margin: 0; font-weight: 500; opacity: .85; font-variant-numeric: tabular-nums; }
.kit__cap b { font-weight: 700; }
.kit__pal { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 0; }
.kit__k { margin: 0; font-size: .75rem; color: var(--ink-48); }
.kit__k b { color: var(--ink); font-weight: 600; }
.kit__pal ul { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.kit__sw { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 8px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--c); color: var(--t); box-shadow: inset 0 0 0 1px rgba(15, 21, 18, .08); cursor: pointer; overflow: hidden; outline-offset: 2px;
  transition: flex-grow .7s var(--ease-out); }
.kit__sw.is-on { flex-grow: 2.4; }
.kit__role { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.kit__sw b { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.kit__sw small { grid-column: 1 / -1; font-size: .6875rem; opacity: 0; max-height: 0; transition: opacity .5s var(--ease), max-height .5s var(--ease); font-variant-numeric: tabular-nums; }
.kit__sw.is-on small { opacity: .75; max-height: 1.4em; }
/* every tile in the gallery rail is the same depth as the brand card, at every width */
@media (max-width: 767px) {
  .shot, .shot.shot--kit { height: 400px; }
  .shot.shot--kit { width: 86vw; max-width: 86vw; }
  .kit__sw { padding-inline: 10px; }
  .kit__role { display: none; }
}
@media (max-width: 559px) {
  .kit { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .kit__frame { width: 66%; }
  .kit__pal { padding: 10px; gap: 8px; }
  .kit__pal ul { flex-direction: row; height: 64px; flex: none; }
  .kit__sw { padding: 0 8px; grid-template-columns: minmax(0, 1fr); align-content: end; padding-bottom: 8px; min-width: 0; overflow: hidden; }
  .kit__sw .kit__role, .kit__sw small { display: none; }
  .kit__sw b { text-align: left; font-size: .6875rem; opacity: 0; transition: opacity .4s var(--ease); white-space: nowrap; }
  .kit__sw.is-on { flex-grow: 3; }
  .kit__sw.is-on b { opacity: 1; }
}
.cases__nav--light .round { background: var(--ink); }
.cases__nav--light .round:hover { background: var(--mint); }

.quote-band { background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--mint-wash) 0%, var(--paper) 100%); }
.more { padding-bottom: clamp(24px, 3vw, 40px); }
.more + .cta { padding-top: clamp(56px, 6vw, 96px); }
.bigquote { max-width: 980px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.bigquote .quote__mark { width: 30px; color: var(--mint-deep); }
.bigquote__text {
  font-family: var(--f-display); font-weight: 500; font-size: clamp(1.375rem, 1rem + 1.4vw, 2.125rem);
  line-height: 1.2; letter-spacing: -.035em; color: var(--ink); text-wrap: balance;
}
.bigquote__text:has(.hl) { color: var(--ink-48); }
.bigquote__text .hl { color: var(--ink); }
.bigquote .who { text-align: left; }
.bigquote .who__av { width: 44px; height: 44px; }

@media (max-width: 991px) {
  .p2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .cmeta { grid-template-columns: 1fr 1fr; }
  .cmeta > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cmeta > div:nth-child(n+3) { border-top: 1px solid var(--ink-12); }
  .shot { max-width: 82vw; }
}

/* =====================================================================
   Motion layer (js/fx.js, js/shader.js, js/motion.js)
   ===================================================================== */

/* living backgrounds: the canvas sits over the section's own colour */
.shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.shader.is-ready { opacity: 1; }
.section--shader, .cta { isolation: isolate; overflow: hidden; }
.section--shader { position: relative; }
.shader--hero { z-index: -1; }
.shader--hero.is-ready { opacity: 1; }
.has-shader .cta::before { display: none; }

/* header draws in once the page moves */
.nav { transition: max-width .7s var(--ease-out), background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), box-shadow .5s var(--ease); }
.scrolled .nav { max-width: 1220px; }

/* button motion: ripple on press, glow and ring follow the pointer */
.btn, .round { overflow: hidden; }
.round { position: relative; isolation: isolate; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: currentColor; opacity: .28; transform: scale(0); animation: ripple .75s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), var(--glow, rgba(255, 255, 255, .6)), transparent 70%);
}
.btn:hover::before { opacity: 1; }
.btn--ink, .btn:not(.btn--mint):not(.btn--paper):not(.btn--ghost) { --glow: rgba(130, 244, 133, .42); }
.btn--ghost { --glow: rgba(130, 244, 133, .16); }
.btn--ghost::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(70px circle at var(--mx, 50%) var(--my, 50%), var(--mint), transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn--ghost:hover::after { opacity: 1; }
/* links that leave the site: the arrow sweeps out north-east */
.is-away .arr svg + svg { transform: translate(-160%, 160%) rotate(-45deg); }
.is-away:hover .arr svg:first-child, .is-away:focus-visible .arr svg:first-child { transform: translate(160%, -160%) rotate(-45deg); }
.is-away:hover .arr svg + svg, .is-away:focus-visible .arr svg + svg { transform: rotate(-45deg); }

/* card spotlight: a mint ring that follows the pointer round the edge */
.spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .45s var(--ease);
  padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 158, 76, .9), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.section--dark .spot, .pstep .spot, .case .spot { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(130, 244, 133, .9), transparent 70%); }
.has-spot:hover > .spot { opacity: 1; }
.bento__card, .plan, .pstep, .phase, .seo-strip { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .3s; }
@media (hover: hover) {
  .bento__card:hover, .plan:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(15, 21, 18, .35); }
  .pstep:hover { transform: translateY(-4px); }
}

/* hero headline: each word rises out of its own line */
.js [data-rise]:not(.is-split) { opacity: 0; }
/* each word is masked while it rises. The mask is a clip-path, not overflow: hidden, and reaches past the
   word's sides, so the tight tracking can't shave the last letter (the s of "business", the r of "Your") */
.rw { display: inline-block; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; clip-path: inset(-.3em -.25em 0 -.25em); }
.rw > span { display: inline-block; transform: translateY(105%); transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--i, 0) * 65ms + 120ms); }
.is-risen .rw > span { transform: none; }

/* typed statements: words light in reading order */
.statement { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.375rem, 1.05rem + 1.25vw, 2.125rem); line-height: 1.18; letter-spacing: -.035em; color: var(--ink); text-wrap: pretty; }
.statement .hl { color: var(--ink); background: linear-gradient(transparent 62%, rgba(130, 244, 133, .55) 62%, rgba(130, 244, 133, .55) 92%, transparent 92%); }
.section--dark .statement { color: var(--paper); }
.section--dark .statement .hl { color: var(--mint); background: none; }
[data-words].is-ready .w { opacity: .16; transition: opacity .4s var(--ease), transform .6s var(--ease-out); display: inline-block; transform: translateY(.18em); }
[data-words].is-ready .w.is-lit { opacity: 1; transform: none; }
[data-words].is-ready .hl { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1.2s var(--ease-out); }
[data-words].is-done .hl, [data-words].is-all-lit .hl { background-size: 100% 100%; }

/* Ryan's journey on the photo */
.ghost { transition: background-color .6s var(--ease), color .6s var(--ease), width .7s var(--ease-out), box-shadow .6s var(--ease), border-color .6s; }
.ghost .ghost__dot, .ghost .ghost__txt small { transition: background-color .6s var(--ease), color .6s var(--ease); }
.is-journey .ghost--past .ghost__dot { background: rgba(130, 244, 133, .35); }

/* process steps follow the build illustration */
.process { position: relative; padding-top: 22px; }
.process::before, .process::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--paper-12); }
.process::after { background: var(--mint); transform-origin: left; transform: scaleX(var(--fill, 1)); transition: transform .6s var(--ease-out); }
.pstep { transition: transform .5s var(--ease-out), background-color .4s var(--ease), opacity .4s var(--ease), box-shadow .4s var(--ease); }
.process.is-sync .pstep { opacity: .5; }
.process.is-sync .pstep.is-done { opacity: .85; }
.process.is-sync .pstep.is-live { opacity: 1; background: #20352a; box-shadow: inset 0 0 0 1px rgba(130, 244, 133, .55), 0 24px 50px -30px rgba(130, 244, 133, .35); transform: translateY(-6px); }

/* footer wordmark wipes in */
.js .footer__mark svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease-out); }
.js .footer__mark.is-in svg { clip-path: inset(0 0 0 0); }

/* ---------- layouts that hold the illustrations ---------- */
.problem { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.problem__fig { position: sticky; top: calc(var(--header-h) + 8px); --mo-max: 560px; }
.problem .frow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.figrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; margin-bottom: clamp(48px, 5vw, 80px); }
.figrow .head { margin-bottom: 0; }
.section > .wrap > :last-child, .figrow:last-child { margin-bottom: 0; }
.figrow__fig { --mo-max: 560px; width: 100%; }
.figrow--flip .figrow__fig { order: -1; }
.seo-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(22px, 3vw, 40px); }
.seo-strip__body { display: flex; flex-direction: column; gap: 22px; }
.seo-strip__t { gap: 12px; max-width: 34em; }
.seo-strip__fig { --mo-max: 480px; }
.seo-strip__fig figcaption { display: none; }
.cta__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.cta__fig { --mo-max: 520px; }
.cta__grid .cta__inner { align-items: flex-start; text-align: left; margin-inline: 0; }

@media (max-width: 1180px) {
  .problem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 991px) {
  .problem, .figrow, .cta__grid, .seo-strip { grid-template-columns: minmax(0, 1fr); }
  .problem__fig { position: static; --mo-max: 520px; }
  .figrow--flip .figrow__fig { order: 0; }
  .figrow__fig, .cta__fig { --mo-max: 520px; }
  .cta__grid .cta__inner { align-items: center; text-align: center; margin-inline: auto; }
  .cta__grid .cta__inner .btn-row { justify-content: center; }
  .cta__grid .cta__sig { text-align: left; }
  .seo-strip__fig { --mo-max: 520px; }
}
@media (max-width: 767px) {
  .scrolled .nav { max-width: none; }
  .cta__fig { --mo-max: 400px; }
}
@media (max-width: 479px) {
  /* QA18 finding 12: on phones the final call to action's buttons stack at one width, label left and arrow right */
  .cta__grid .cta__inner .btn-row { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
  .cta__grid .cta__inner .btn-row .btn { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .shader { transition: none; }
  .rw > span { transform: none; transition: none; }
  .js .footer__mark svg { clip-path: none; }
}

/* =====================================================================
   Secondary palette in use
   Gold = brand, sky = messaging, lilac = website, coral = SEO, mint = the
   result and every action. Light colours only ever sit behind dark text or
   on dark grounds; on light grounds, lines and icons use the deep shades.
   ===================================================================== */
.tint--gold  { --acc: var(--gold);  --acc-deep: var(--gold-deep);  --acc-wash: var(--gold-wash); }
.tint--sky   { --acc: var(--sky);   --acc-deep: var(--sky-deep);   --acc-wash: var(--sky-wash); }
.tint--lilac { --acc: var(--lilac); --acc-deep: var(--lilac-deep); --acc-wash: var(--lilac-wash); }
.tint--coral { --acc: var(--coral); --acc-deep: var(--coral-deep); --acc-wash: var(--coral-wash); }
.tint--mint  { --acc: var(--mint);  --acc-deep: var(--mint-deep);  --acc-wash: var(--mint-wash); }

/* eyebrows and chips */
.pill--gold  { background: var(--gold);  border-color: var(--gold); }
.pill--sky   { background: var(--sky);   border-color: var(--sky); }
.pill--lilac { background: var(--lilac); border-color: var(--lilac); }
.pill--coral { background: var(--coral); border-color: var(--coral); }
.pill--mint  { background: var(--mint);  border-color: var(--mint); }
.chip--gold  { background: var(--gold);  color: var(--ink); }
.chip--sky   { background: var(--sky);   color: var(--ink); }
.chip--lilac { background: var(--lilac); color: var(--ink); }
.chip--coral { background: var(--coral); color: var(--ink); }

/* icon tiles take the tint they sit in */
.icon-tile { background: var(--acc-wash, var(--paper)); }
.icon-tile svg { color: var(--acc-deep, var(--ink)); }
.bento__card .icon-tile { background: var(--acc, var(--paper)); }
.bento__card .icon-tile svg { color: var(--ink); }
.bento__card { position: relative; }
.mega__icon { background: var(--acc-wash, var(--paper)); }
.mega__icon svg { color: var(--acc-deep, var(--ink)); }
.mega__item:hover .mega__icon { background: var(--acc, var(--mint)); }
.mega__item:hover .mega__icon svg { color: var(--ink); }
.acc__panel a.tint { justify-content: flex-start; gap: 10px; }
.acc__panel a.tint::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--acc); flex: none; align-self: center; }

/* hero */
.stars { color: var(--gold); }
.hero__facts .fact:nth-child(1) svg { color: var(--gold-deep); }
.hero__facts .fact:nth-child(2) svg { color: var(--sky-deep); }
.hero__facts .fact:nth-child(3) svg { color: var(--lilac-deep); }

/* feature rows carry an icon tile in their colour */
.frow__k { display: inline-flex; align-items: center; gap: 8px; }
.frow__i { width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; background: var(--acc, var(--paper)); color: var(--ink); flex: none; }
.frow__i svg { width: 22px; height: 22px; }
.frow__i + .frow__k { margin-top: 4px; }

/* the three phases: gold, mint, coral */
.split__overlay .ghost:nth-child(1) { --acc: var(--gold); }
.split__overlay .ghost:nth-child(2) { --acc: var(--mint); }
.split__overlay .ghost:nth-child(3) { --acc: var(--coral); }
.ghost--on .ghost__dot { background: var(--acc, var(--mint)); }
.is-journey .ghost--past .ghost__dot { background: color-mix(in srgb, var(--acc, var(--mint)) 45%, transparent); }

/* services, pricing */
.plans .plan:nth-child(1) { --acc: var(--sky); --acc-deep: var(--sky-deep); }
.plans .plan:nth-child(2) { --acc: var(--mint); --acc-deep: var(--mint); }
.plans .plan:nth-child(3) { --acc: var(--lilac); --acc-deep: var(--lilac-deep); }
.plan__name { display: inline-flex; align-items: center; gap: 10px; }
.plan__name::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--acc, var(--mint)); flex: none; }
.plan .ticks svg { color: var(--acc-deep, var(--mint-deep)); }
.plan--pop .ticks svg { color: var(--mint-deep); }

/* the five steps: each step its own colour, ending on mint */
.process .pstep:nth-child(1) { --acc: var(--coral); }
.process .pstep:nth-child(2) { --acc: var(--gold); }
.process .pstep:nth-child(3) { --acc: var(--sky); }
.process .pstep:nth-child(4) { --acc: var(--lilac); }
.process .pstep:nth-child(5) { --acc: var(--mint); }
.pstep__n { color: var(--acc, var(--mint)); }
.process::after { background: linear-gradient(90deg, var(--coral) 0%, var(--gold) 25%, var(--sky) 50%, var(--lilac) 75%, var(--mint) 100%); }
.process.is-sync .pstep.is-live { box-shadow: inset 0 0 0 1px var(--acc, var(--mint)), 0 24px 50px -30px color-mix(in srgb, var(--acc, var(--mint)) 45%, transparent); }
.pstep .spot { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--acc, var(--mint)), transparent 70%); }
/* QA18 finding 9: the step titles read at full strength (".pstep p" was dimming and shrinking them to body text),
   and with reduced motion the cards show their lit state, as the synced animation never runs */
.pstep p.pstep__t { color: var(--paper); font-size: 1.0625rem; }
@media (prefers-reduced-motion: reduce) {
  .process .pstep { background: #20352a; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc, var(--mint)) 70%, transparent); }
}

/* case study cards cycle through the palette */
.cases__rail .case:nth-child(5n+1) { --acc: var(--gold); }
.cases__rail .case:nth-child(5n+2) { --acc: var(--sky); }
.cases__rail .case:nth-child(5n+3) { --acc: var(--lilac); }
.cases__rail .case:nth-child(5n+4) { --acc: var(--coral); }
.cases__rail .case:nth-child(5n+5) { --acc: var(--mint); }
.case__client { background: var(--acc, var(--paper-2)); color: var(--ink); }
.case__more { color: var(--acc, var(--mint)); }
.case .spot { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--acc, var(--mint)), transparent 70%); }

/* statement highlight and proof wash */
.statement .hl { background-image: linear-gradient(transparent 62%, var(--gold) 62%, var(--gold) 92%, transparent 92%); }
.proof { background:
  linear-gradient(180deg, var(--paper) 0%, rgba(244, 244, 241, 0) 18%, rgba(244, 244, 241, 0) 78%, var(--paper) 100%),
  radial-gradient(55% 45% at 0% 0%, var(--mint-wash), transparent 70%),
  radial-gradient(45% 45% at 100% 8%, var(--lilac-wash), transparent 70%),
  radial-gradient(40% 40% at 70% 100%, var(--sky-wash), transparent 70%),
  var(--paper); }
.quote-band { background:
  radial-gradient(40% 55% at 30% 45%, var(--mint-wash), transparent 70%),
  radial-gradient(40% 55% at 70% 50%, var(--lilac-wash), transparent 70%),
  var(--paper); }
.proof__stat .icon-tile { background: var(--gold-wash); }
.proof__stat .icon-tile svg { color: var(--gold-deep); }

/* dark sections */
.p2__side .ticks svg { color: var(--lilac); }
.names__item:nth-child(4n+1)::after { background: var(--gold); }
.names__item:nth-child(4n+2)::after { background: var(--sky); }
.names__item:nth-child(4n+3)::after { background: var(--lilac); }
.names__item:nth-child(4n+4)::after { background: var(--coral); }
.creds .cred:nth-child(1) { --acc-wash: var(--gold-wash); --acc-deep: var(--gold-deep); }
.creds .cred:nth-child(2) { --acc-wash: var(--sky-wash); --acc-deep: var(--sky-deep); }
.creds .cred:nth-child(3) { --acc-wash: var(--lilac-wash); --acc-deep: var(--lilac-deep); }
.creds .cred:nth-child(4) { --acc-wash: var(--coral-wash); --acc-deep: var(--coral-deep); }
.creds .cred:nth-child(5) { --acc-wash: var(--mint-wash); --acc-deep: var(--mint-deep); }
.cred .icon-tile { background: var(--acc-wash, var(--card)); }

/* =====================================================================
   Header: frosted glass, light over light sections, dark over dark ones
   ===================================================================== */
.brand { color: inherit; }
.mega, .mpanel { color: var(--ink); }
.nav-dark .nav {
  color: var(--paper); background: rgba(14, 22, 17, .42); border-color: rgba(244, 244, 241, .14);
  box-shadow: inset 0 1px 0 rgba(244, 244, 241, .08), 0 14px 36px -20px rgba(0, 0, 0, .55);
}
.nav-dark .nav__link:hover, .nav-dark .nav__link[aria-expanded="true"], .nav-dark .nav__link[aria-current="page"], .nav-dark .nav__toggle:hover { background: var(--paper-12); }
.nav-dark .mega .nav__link, .nav-dark .mpanel { color: var(--ink); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(246, 246, 243, .96); }
  .nav-dark .nav { background: rgba(14, 22, 17, .94); }
}

/* =====================================================================
   Footer: dark, a pillar ticker, live UK time, and a wordmark that
   catches the light where the pointer is
   ===================================================================== */
.footer { background: #0c120e; color: var(--paper); padding-top: 0; position: relative; isolation: isolate; border-top: 1px solid var(--paper-12); }
.footer__ticker { padding-block: clamp(16px, 1.6vw, 22px); border-bottom: 1px solid var(--paper-12); }
.footer__track { gap: 0; --hg: 0px; }
.footer__track li {
  display: inline-flex; align-items: center; gap: clamp(10px, .9vw, 14px); padding-right: clamp(28px, 3vw, 48px);
  font-family: var(--f-display); font-weight: 500; font-size: clamp(1.125rem, .95rem + .8vw, 1.625rem); letter-spacing: -.03em; line-height: 1;
  color: var(--paper); white-space: nowrap;
}
.footer__track li i { width: .42em; height: .42em; border-radius: 4px; background: var(--c); flex: none; transform: translateY(.04em); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(40px, 6vw, 96px); padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 64px); }
.footer__about { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 380px; }
.footer__about .brand { width: 170px; color: var(--paper); }
.footer__about > p { color: var(--paper-64); }
.footer__email { font-size: .9375rem; }
.footer__clock { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--paper-64); font-variant-numeric: tabular-nums; }
.footer__live { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(130, 244, 133, .6); animation: live 2.4s var(--ease-out) infinite; }
.footer__sep { color: var(--paper-24); }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(130, 244, 133, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(130, 244, 133, 0); } }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer__cols > div { --col: var(--mint); border-top: 2px solid var(--col); padding-top: 16px; }
.footer__cols > div:nth-child(1) { --col: var(--gold); }
.footer__cols > div:nth-child(2) { --col: var(--sky); }
.footer__cols > div:nth-child(3) { --col: var(--lilac); }
.footer__cols > div:nth-child(4) { --col: var(--coral); }
.footer h3 { color: var(--col, var(--paper-48)); font-size: .8125rem; margin-bottom: 14px; }
.footer__links { display: flex; flex-direction: column; gap: 9px; }
.footer__links a {
  display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--paper-80, rgba(244, 244, 241, .8));
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .35s var(--ease), color .3s var(--ease), transform .45s var(--ease-out);
}
.footer__links a:hover, .footer__links a:focus-visible { text-decoration-color: currentColor; color: var(--col, var(--mint)); transform: translateX(3px); }
.footer__more { color: var(--paper-64) !important; }
.footer__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px 40px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid var(--paper-12); font-size: .8125rem; color: var(--paper-48); }
.footer__bar p { max-width: 82ch; text-wrap: pretty; }
.footer__links-inline { white-space: nowrap; }
.footer__totop { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--paper); }
.footer__totop-i { width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; background: var(--paper-12); transition: background-color .3s var(--ease), color .3s var(--ease); }
.footer__totop-i svg { width: 13px; height: 13px; transform: rotate(-90deg); transition: transform .45s var(--ease-out); }
.footer__totop:hover .footer__totop-i { background: var(--mint); color: var(--ink); }
.footer__totop:hover .footer__totop-i svg { transform: rotate(-90deg) translateX(3px); }
.footer__mark { margin-top: clamp(8px, 1.5vw, 24px); color: inherit; }
.footer__mark svg { display: block; width: 100%; height: auto; margin-bottom: -1.4%; overflow: visible; }
.footer__mark-base { fill: rgba(244, 244, 241, .06); }
.footer__mark-glow { opacity: .9; transition: opacity .8s var(--ease); }

@media (max-width: 1180px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__about { max-width: 520px; }
}
@media (max-width: 767px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__live { animation: none; }
}

/* =====================================================================
   Wix Headless landing page (pages/wix-headless.html)
   ===================================================================== */
/* draft flags: sample stats and the quote awaiting approval. Remove the
   spans once the real figures and Aamir's approved quote are in. */
.draft { display: inline-flex; align-items: center; align-self: flex-start; height: 22px; padding: 0 8px; border-radius: var(--r-sm);
  border: 1px dashed var(--coral-deep); background: var(--coral-wash); color: var(--coral-deep); font-size: .6875rem; font-weight: 700; letter-spacing: 0; line-height: 1; white-space: nowrap; }

/* hero: Trent's site in the browser, with the three things clients care about round it */
.hero--hl .hero__title { max-width: none; font-size: clamp(2.5rem, 1.3rem + 3.3vw, 4.25rem); }
.js .hero--hl .hbr__vp--img img { clip-path: inset(0 100% 0 0); transform: scale(1.06); transition: clip-path 1.3s var(--ease-out) .45s, transform 1.8s var(--ease-out) .45s; }
.js .hero--hl .hero__stage.is-in .hbr__vp--img img { clip-path: inset(0 0 0 0); transform: none; }
.hbr__vp--img img { object-position: left top; }
/* ---------- Client website screenshots ----------
   Rule for every screenshot of a client's site: it is always shown at its full width and
   scaled in proportion. It may only be trimmed at the bottom, like the fold of a real
   browser window, and never at the sides. So use a capture that's taller than its frame.
   If a capture is ever too short, min-height + cover keeps the frame filled, and
   tools/shotcheck.py flags the side crop so the capture gets replaced. */
.shotvp { position: relative; overflow: hidden; background: var(--shot-bg, #fff); }
.shotvp > img, .hbr__vp--img.shotvp > img { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: center top; }
.hbr__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--mint); font-size: .75rem; font-weight: 700; flex: none; white-space: nowrap; }
.link--play { gap: 12px; }
.link__play { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-12), 0 6px 14px -8px rgba(15, 21, 18, .4); transition: background-color .3s var(--ease), transform .4s var(--ease-out); }
.link__play svg { width: 11px; height: 11px; }
.link--play:hover .link__play { background: var(--mint); transform: scale(1.06); }
.link--play:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.hchip--cms { width: 228px; }
@media (min-width: 768px) { .hero--hl .hchip--cms { top: calc(9% + 52px); } }
@media (max-width: 1280px) { .hero--hl .hchip--cms { width: auto; } .hchip--cms .hchip__field { display: none; } }
.hchip__field { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-12); }
.hchip__field small { font-size: .6875rem; font-weight: 600; color: var(--ink-48); }
.hchip__field b { font-size: .8125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.hchip__field b::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--ink); animation: mo-rec 1.1s steps(2) infinite; }
.hchip__saved { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 24px; padding: 0 8px; border-radius: var(--r-sm); background: var(--mint); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.hchip__saved svg { width: 12px; height: 12px; }
.hchip--dev { --acc: var(--lilac); }
.hchip__devs { display: flex; align-items: flex-end; gap: 7px; height: 32px; }
.hchip__devs b { display: block; border: 2px solid var(--ink); border-radius: 3px; background: linear-gradient(var(--lilac) 0 34%, #fff 34% 52%, var(--paper-2) 52% 62%, #fff 62%); }
.hchip__devs b:nth-child(1) { width: 48px; height: 32px; }
.hchip__devs b:nth-child(2) { width: 24px; height: 30px; border-radius: 4px; }
.hchip__devs b:nth-child(3) { width: 14px; height: 26px; border-radius: 4px; }
.hchip--auto { --acc: var(--coral); }
.hchip__ticks { display: flex; flex-direction: column; gap: 5px; }
.hchip__ticks b { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.hchip__ticks svg { width: 13px; height: 13px; color: var(--coral-deep); }
.js .hero__stage .hchip__ticks b { opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.js .hero__stage.is-in .hchip__ticks b { opacity: 1; transform: none; }
.js .hero__stage.is-in .hchip__ticks b:nth-child(1) { transition-delay: 1.1s; }
.js .hero__stage.is-in .hchip__ticks b:nth-child(2) { transition-delay: 1.3s; }
.js .hero__stage.is-in .hchip__ticks b:nth-child(3) { transition-delay: 1.5s; }
.hero--hl .hero__quote .glass { gap: 12px; }
/* the screenshot shows Trent's whole hero at full width, so the quote sits a little lower to keep the headline clear */
@media (min-width: 768px) { .hero--hl .hero__quote { bottom: -44px; } }
@media (min-width: 992px) and (max-width: 1180px) { .hero--hl .hero__quote { bottom: -112px; } .hero--hl .hchip--seo { bottom: -40px; } }

/* "you're looking at it": this site and the Wix collections behind it */
.built { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(22px, 3vw, 44px);
  border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--ink-12); box-shadow: 0 40px 80px -60px rgba(15, 21, 18, .45); }
.built__t { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 34em; }
.built__map { display: grid; grid-template-columns: minmax(0, 1fr) clamp(40px, 6vw, 88px) minmax(0, 1.2fr); align-items: center; }
.built__node { border-radius: var(--r); background: var(--paper); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.built__node b { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem); letter-spacing: -.03em; overflow-wrap: anywhere; }
.built__node small { font-size: .8125rem; color: var(--ink-64); }
.built__k { font-size: .75rem; font-weight: 600; color: var(--ink-48); }
.built__node--wix { background: var(--lilac-wash); }
.built__node ul { display: flex; flex-direction: column; margin-top: 4px; }
.built__node li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--ink-12); font-size: .875rem; font-weight: 500; }
.built__node li i { width: 10px; height: 10px; border-radius: 2px; background: var(--acc); }
.built__node li b { font: 700 .875rem / 1 var(--f-text); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.built__wire { position: relative; height: 2px; margin-inline: 6px; background: var(--ink-12); }
.built__wire i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-deep); animation: wire-x 2.4s linear infinite; }
.built__wire i:nth-child(2) { animation-delay: -.8s; }
.built__wire i:nth-child(3) { animation-delay: -1.6s; }
@keyframes wire-x { 0% { left: calc(100% - 8px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }

/* the tour: player plus a chapter list that jumps the video (or swaps the still until the video's in) */
.tour { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.tour__player { border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--ink-12); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px -50px rgba(15, 21, 18, .45); }
.tour__bar { height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; background: #f1f2ee; border-bottom: 1px solid var(--ink-12); font-size: .8125rem; }
.tour__k { color: var(--ink-48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tour__k b { color: var(--ink); font-weight: 600; }
.tour__meta { display: inline-flex; align-items: center; gap: 14px; flex: none; font-weight: 600; color: var(--ink-64); }
.tour__cc { display: inline-flex; align-items: center; gap: 6px; }
.tour__cc svg { width: 16px; height: 16px; }
.tour__screen { position: relative; aspect-ratio: 16 / 9; background: #0c120e; }
.tour__still, .tour__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour__still { transition: opacity .3s var(--ease); }
.tour__still.is-swap { opacity: .15; }
.tour__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 7px 18px 7px 7px; border-radius: var(--r);
  background: rgba(255, 255, 255, .94); color: var(--ink); font-weight: 600; white-space: nowrap; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7); transition: transform .45s var(--ease-out); }
.tour__play:not(:disabled):hover { transform: translate(-50%, -50%) scale(1.04); }
/* QA18 finding 13: the button sits in the poster's empty lower-left corner, lined up with the poster's own text
   and under its chips (which end 60% down), so it covers none of the poster's words at any width */
.tour__play { left: 4.45%; top: 66%; transform: none; transform-origin: left center; }
.tour__play:not(:disabled):hover { transform: scale(1.04); }
.tour__play-i { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--mint); }
.tour__play-i svg { width: 15px; height: 15px; }
.tour__play:disabled { cursor: default; }
.tour__play:disabled .tour__play-i { background: var(--paper-2); color: var(--ink-48); }
.tour__draft { position: absolute; left: 12px; top: 12px; }
.tour.is-playing .tour__play, .tour.is-playing .tour__still, .tour.is-playing .tour__draft { display: none; }
.tour__chapters { height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--ink-12); padding: 8px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.tour__chapters button { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 10px; border-radius: var(--r-sm); text-align: left; font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--ink-80);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.tour__chapters button:hover { background: var(--paper); color: var(--ink); }
.tour__chapters button[aria-current="true"] { background: var(--mint-wash); color: var(--ink); box-shadow: inset 3px 0 0 var(--mint-deep); }
.tour__time { font-size: .8125rem; font-weight: 600; color: var(--ink-48); font-variant-numeric: tabular-nums; }
.tour__chapters b { font-weight: 700; color: var(--ink-48); margin-right: 6px; font-variant-numeric: tabular-nums; }

/* what is headless: the front, the back, and the dots moving between them */
.hlx { width: 100%; max-width: 580px; margin-inline: auto; display: flex; flex-direction: column; }
.hlx__layer { border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--ink-12); padding: 14px; box-shadow: 0 30px 60px -44px rgba(15, 21, 18, .45); }
.hlx__k { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.hlx__k small { display: block; font-size: .75rem; font-weight: 500; color: var(--ink-48); letter-spacing: 0; }
.hlx__tag { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: var(--r-sm); background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 700; }
.hlx__layer--back .hlx__tag { background: var(--mint); color: var(--ink); }
.hlx__br { border-radius: var(--r); overflow: hidden; border: 1px solid var(--ink-12); background: #fff; }
.hlx__bar { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #f1f2ee; border-bottom: 1px solid var(--ink-12); font-size: .6875rem; color: var(--ink-48); }
.hlx__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(15, 21, 18, .16); flex: none; }
.hlx__bar span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlx__br img { width: 100%; height: auto; }
.hlx__wire { position: relative; width: 2px; height: 52px; margin-inline: auto; background: var(--ink-12); }
.hlx__wire i { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-deep); animation: wire-y 2.1s linear infinite; }
.hlx__wire i:nth-child(2) { animation-delay: -.7s; }
.hlx__wire i:nth-child(3) { animation-delay: -1.4s; }
@keyframes wire-y { 0% { top: calc(100% - 8px); opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: 0; opacity: 0; } }
.hlx__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hlx__grid li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px; border-radius: var(--r-sm); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-12); font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.hlx__grid svg { width: 18px; height: 18px; padding: 6px; box-sizing: content-box; border-radius: var(--r-sm); background: var(--acc-wash); color: var(--acc-deep); }
.js .hlx__grid li { opacity: 0; transform: translateY(8px); }
.js .is-in .hlx__grid li { animation: hlx-in .6s var(--ease-out) both; }
.js .is-in .hlx__grid li:nth-child(1) { animation-delay: .5s; } .js .is-in .hlx__grid li:nth-child(2) { animation-delay: .58s; }
.js .is-in .hlx__grid li:nth-child(3) { animation-delay: .66s; } .js .is-in .hlx__grid li:nth-child(4) { animation-delay: .74s; }
.js .is-in .hlx__grid li:nth-child(5) { animation-delay: .82s; } .js .is-in .hlx__grid li:nth-child(6) { animation-delay: .9s; }
.js .is-in .hlx__grid li:nth-child(7) { animation-delay: .98s; } .js .is-in .hlx__grid li:nth-child(8) { animation-delay: 1.06s; }
@keyframes hlx-in { to { opacity: 1; transform: none; } }
.hlx__foot { align-self: center; margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r); background: var(--mint-wash); font-size: .875rem; font-weight: 600; text-align: left; }
.hlx__foot svg { width: 15px; height: 15px; color: var(--mint-deep); flex: none; }

/* what you can do: one card per tour chapter */
.chaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chap { position: relative; background: var(--card); border-radius: var(--r); padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 10px; }
.chap__top { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.chap__i { width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; background: var(--acc); color: var(--ink); flex: none; }
.chap__i svg { width: 22px; height: 22px; }
.chap__n { font-family: var(--f-display); font-size: 1.125rem; letter-spacing: -.02em; color: var(--ink-48); font-variant-numeric: tabular-nums; }
.chap__watch { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: var(--r-sm); background: var(--paper); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .25s var(--ease), color .25s var(--ease); }
.chap__watch svg { width: 10px; height: 10px; color: var(--acc-deep); transition: color .25s var(--ease); }
.chap__watch:hover, .chap__watch:focus-visible { background: var(--ink); color: var(--paper); }
.chap__watch:hover svg, .chap__watch:focus-visible svg { color: var(--acc); }
.chap p { color: var(--ink-64); }

/* the Wix platform: their figures, on a white card */
.plat { border-radius: var(--r-lg); background: var(--card); padding: clamp(24px, 3.4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px clamp(32px, 5vw, 88px); }
.plat__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.plat__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plat__stats li { border-radius: var(--r); background: var(--acc-wash); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 168px; }
.plat__n { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.25rem, 1.7rem + 1.8vw, 3.25rem); line-height: 1; letter-spacing: -.05em; }
.plat__stats span { font-size: .9375rem; line-height: 1.4; color: var(--ink-80); }
.plat__ticks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 28px; padding-top: 28px; border-top: 1px solid var(--ink-12); }
.plat__src { grid-column: 1 / -1; margin-top: -12px; }
.plat__src a, .vs__note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-32); }
.plat__src a:hover, .vs__note a:hover { text-decoration-color: currentColor; }
/* edit once, every screen */
.scr-lede { margin-top: 14px; max-width: 34em; }
.scr-src { max-width: 72em; margin: 10px auto 0; text-align: center; text-wrap: balance; }
.scr-src a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-32); }
.scr-src a:hover { text-decoration-color: currentColor; }

/* classic Editor vs Wix Headless */
.vs { border-radius: var(--r-lg); background: var(--paper); padding: 8px 8px 4px; }
.vs table { width: 100%; border-collapse: separate; border-spacing: 0; }
.vs th, .vs td { text-align: left; vertical-align: top; padding: 16px 18px; border-top: 1px solid var(--ink-12); font-size: .9375rem; line-height: 1.4; }
.vs thead th { border-top: 0; padding-block: 16px 14px; }
.vs__h { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; font-size: 1rem; }
.vs tbody th { width: 24%; font-weight: 600; }
.vs td { position: relative; width: 38%; padding-left: 48px; color: var(--ink-64); }
.vs td > svg, .vs td > i { position: absolute; left: 20px; top: 19px; }
.vs td > svg { width: 16px; height: 16px; color: var(--mint-deep); }
.vs td > i { width: 12px; height: 2px; top: 26px; left: 22px; border-radius: 2px; background: var(--ink-32); }
.vs .vs__us { background: var(--card); color: var(--ink); }
.vs td.vs__us { font-weight: 500; }
.vs thead .vs__us { border-radius: var(--r) var(--r) 0 0; }
.vs tbody tr:last-child .vs__us { border-radius: 0 0 var(--r) var(--r); }
.vs tbody tr:first-child td, .vs tbody tr:first-child th { border-top-color: transparent; }
.vs__trade th, .vs__trade td { border-top: 1px dashed var(--ink-32); }
.vs__note { padding: 14px 18px 12px; max-width: 72em; }

/* case study: Trent */
.tcase { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.tcase__art { position: relative; min-height: 620px; border-radius: var(--r-lg); background: var(--coral-wash); overflow: hidden; }
.tcase__logo { position: absolute; left: 6%; top: 6.5%; width: clamp(110px, 18%, 170px); height: auto; }
.tcase__br { position: absolute; margin: 0; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--ink-12); box-shadow: 0 30px 60px -30px rgba(15, 21, 18, .45); }
.tcase__br img { width: 100%; height: auto; }
.tcase__br--main { left: 6%; top: 19%; width: 60%; }
.tcase__br--side { right: 5%; top: 29%; width: 36%; z-index: 1; animation: hfloat 8s ease-in-out infinite; }
.tcase__chip { left: 6%; bottom: 6%; --acc: var(--sky); animation-delay: -3s; }
.tcase__sync { font-size: .875rem; color: var(--ink-64); white-space: nowrap; }
.tcase__sync b { color: var(--ink); font-weight: 700; }
.tcase__story { display: flex; flex-direction: column; gap: 8px; }
.tcase__story .frow { grid-template-columns: minmax(0, 1fr); gap: 14px; flex: 1; align-content: start; }
.tcase__story .frow__b { font-size: clamp(1rem, .95rem + .25vw, 1.125rem); }
.tstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.tstats li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 176px; padding: 22px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 3px 0 var(--acc); }
.tstats .draft { position: absolute; left: 22px; top: 18px; }
.tstats__n { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.tstats li > span:last-child { color: var(--ink-64); }
.tquote { margin-top: clamp(64px, 7vw, 112px); }
.tquote .draft { align-self: center; }

/* who does what */
.who2__you { background: var(--paper); }
.who2__us { background: var(--lilac-wash); }
.who2__k { display: flex; align-items: center; gap: 16px; }
.who2__k .h4 { margin-bottom: 2px; }
.who2__you .frow__i { background: var(--mint); }
.who2__us .frow__i { background: var(--lilac); }
.who2__save { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--r); background: var(--card); }
.who2__n { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); line-height: 1; letter-spacing: -.05em; color: var(--lilac-deep); white-space: nowrap; }
.who2__save span { font-size: .9375rem; color: var(--ink-80); }

/* how the move works */
.moves { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 22px; }
.moves::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--coral) 0%, var(--gold) 25%, var(--sky) 50%, var(--lilac) 75%, var(--mint) 100%); }
.move { position: relative; display: flex; flex-direction: column; gap: 36px; padding: 24px 22px 28px; border-radius: var(--r); background: var(--card); }
.move__n { font-family: var(--f-display); font-size: 2.75rem; line-height: 1; letter-spacing: -.05em; color: var(--acc-deep); font-variant-numeric: tabular-nums; }
.move.tint--mint .move__n { color: var(--mint-deep); }
.move__t { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; margin-bottom: 6px; }
.move p:not(.move__t) { font-size: var(--t-small); color: var(--ink-64); }

/* questions */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq__head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.faq__head .link { padding-block: 4px; color: var(--ink); }
.faq__list { border-top: 1px solid var(--ink-12); }
.faq__item .acc__btn { gap: 24px; padding: 22px 0; font-family: var(--f-display); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.25; letter-spacing: -.025em; }
.faq__item .acc__btn .plus { flex: none; }
.faq__item .acc__panel p { padding: 20px 48px 26px 0; max-width: 40em; font-size: var(--t-lead); line-height: 1.5; letter-spacing: -.015em; color: var(--ink-64); }

@media (hover: hover) {
  .chap { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
  .chap:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(15, 21, 18, .35); }
}
@media (max-width: 1180px) {
  .built { grid-template-columns: minmax(0, 1fr); }
  .plat { grid-template-columns: minmax(0, 1fr); }
  .plat__ticks { grid-template-columns: 1fr 1fr; }
  .moves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tstats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  .built { grid-template-columns: minmax(0, 1fr); }
  .tour { grid-template-columns: minmax(0, 1fr); }
  .tour__chapters { height: auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .chaps { grid-template-columns: 1fr 1fr; }
  .tcase { grid-template-columns: minmax(0, 1fr); }
  .tcase__art { min-height: 0; aspect-ratio: 1 / .86; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
}
@media (max-width: 767px) {
  .hchip--cms { width: auto; }
  .hchip--cms .hchip__field { display: none; }
  .hchip--auto .hchip__ticks { display: none; }
  .built__map { grid-template-columns: minmax(0, 1fr); }
  .built__wire { width: 2px; height: 40px; margin: 0 auto; }
  .built__wire i { left: -3px; animation-name: wire-y; }
  .tour__bar .tour__cc { display: none; }
  .tour__play { padding: 5px 14px 5px 5px; font-size: .875rem; gap: 10px; }
  .tour__play-i { width: 36px; height: 36px; }
  .tour__draft { left: 8px; top: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
  .tour__chapters { grid-template-columns: minmax(0, 1fr); }
  .chaps { grid-template-columns: minmax(0, 1fr); }
  .chap__top { margin-bottom: 12px; }
  .plat__stats { grid-template-columns: minmax(0, 1fr); }
  .plat__stats li { min-height: 0; }
  .plat__ticks { grid-template-columns: minmax(0, 1fr); }
  .vs { padding: 4px; }
  .vs thead { display: none; }
  .vs table, .vs tbody, .vs tr, .vs th, .vs td, .vs tbody th { display: block; width: auto; }
  .vs tbody tr { padding: 16px 12px 12px; border-top: 1px solid var(--ink-12); }
  .vs tbody tr:first-child { border-top: 0; }
  .vs__trade { border-top-style: dashed !important; }
  .vs tbody th { padding: 0 0 10px; border: 0; }
  .vs td { border: 0 !important; padding: 10px 12px 10px 40px; border-radius: var(--r-sm); }
  .vs td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 600; color: var(--ink-48); }
  .vs td > svg { left: 14px; top: 30px; }
  .vs td > i { left: 15px; top: 37px; }
  .vs tbody tr:last-child .vs__us { border-radius: var(--r-sm); }
  .vs__note { padding: 12px 12px 10px; }
  .tcase__art { aspect-ratio: 1 / 1.02; }
  .tcase__br--main { left: 5%; top: 21%; width: 66%; }
  .tcase__br--side { right: 4%; top: 36%; width: 40%; }
  .tcase__chip { left: 5%; bottom: 5%; }
  .tstats li { min-height: 150px; padding: 18px; }
  .tstats .draft { left: 18px; top: 14px; }
  .how.who2 { grid-template-columns: minmax(0, 1fr); }
  .who2__save { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .moves { grid-template-columns: 1fr 1fr; }
  .move { gap: 24px; }
  .move__n { font-size: 2.25rem; }
  .faq__item .acc__panel p { padding-right: 0; }
}
@media (max-width: 479px) {
  .hlx__grid { grid-template-columns: 1fr 1fr; }
  .hlx__grid li { flex-direction: row; align-items: center; }
  .tstats { grid-template-columns: minmax(0, 1fr); }
  .moves { grid-template-columns: minmax(0, 1fr); }
  .tcase__logo { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .built__wire i, .hlx__wire i { animation: none; opacity: 0; }
  .hchip__field b::after { animation: none; }
  .js .hlx__grid li { opacity: 1; transform: none; }
  .js .hero__stage .hchip__ticks b { opacity: 1; transform: none; }
}

/* ---------- Wix Headless page: future-proof (code you own + AI-ready), on dark for emphasis ---------- */
.hero__facts .fact:nth-child(4) svg { color: var(--coral-deep); }
/* QA18 finding 16: on desktop the four Wix Headless hero facts sit two by two, so "AI-ready, code you own" is never left alone on a row */
@media (min-width: 992px) { .hero--hl .hero__facts { display: grid; grid-template-columns: repeat(2, max-content); align-self: stretch; } }
.future .head { margin-bottom: clamp(36px, 4vw, 56px); }
.fut { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 0 8px; }
.fut__card { display: grid; grid-row: span 2; grid-template-rows: subgrid; border-radius: var(--r-lg); background: var(--forest-2); border: 1px solid var(--paper-12); overflow: hidden; }
.fact__link { display: inline-flex; align-items: center; gap: 10px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-32); transition: text-decoration-color .25s var(--ease); }
.fact__link:hover { text-decoration-color: currentColor; }
.fact__link svg { width: 16px; height: 16px; color: var(--coral-deep); flex: none; }
.fut__art { position: relative; display: grid; place-items: center; min-height: 300px; padding: clamp(20px, 2.6vw, 36px);
  background: radial-gradient(80% 95% at 50% 0%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 72%); border-bottom: 1px solid var(--paper-12); }
.fut__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(22px, 2.6vw, 36px); }
.fut__k { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: var(--r-sm); background: var(--acc); color: var(--ink); font-size: .8125rem; font-weight: 700; }
.fut__k svg { width: 14px; height: 14px; }
.fut__body .h3 { color: var(--paper); }
.fut .ticks { gap: 10px; }
.fut .ticks li { color: rgba(244, 244, 241, .8); }
.fut .ticks svg { color: var(--acc); }

/* the repository: yours, and it runs wherever you put it */
.repo { width: 100%; max-width: 440px; border-radius: var(--r); background: #0c120e; border: 1px solid var(--paper-12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); overflow: hidden; font-size: .8125rem; color: var(--paper-64); }
.repo svg { width: 14px; height: 14px; flex: none; color: var(--gold); }
.repo__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--paper-12); }
.repo__name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo__name b { color: var(--paper); font-weight: 600; }
.repo__owner { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-sm); background: rgba(242, 200, 121, .16); color: var(--gold); font-weight: 600; }
.repo__owner b { font-weight: 700; }
.repo__files { padding: 4px 0; }
.repo__files li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; letter-spacing: 0; color: var(--paper-64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo__files li + li { border-top: 1px solid rgba(244, 244, 241, .06); }
.repo__files li svg { color: var(--paper-48); }
.repo__hosts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--paper-12); }
.repo__k { margin-right: 4px; font-weight: 600; color: var(--paper-48); }
.repo__host { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: var(--r-sm); background: rgba(244, 244, 241, .08); color: var(--paper); font-size: .75rem; font-weight: 600; white-space: nowrap; animation: repo-host 8s infinite; }
.repo__host:nth-child(3) { animation-delay: 2s; }
.repo__host:nth-child(4) { animation-delay: 4s; }
.repo__host:nth-child(5) { animation-delay: 6s; }
@keyframes repo-host { 0%, 21% { background: var(--gold); color: var(--ink); } 27%, 100% { background: rgba(244, 244, 241, .08); color: var(--paper); } }

/* your content, used everywhere */
.aiw { width: 100%; max-width: 440px; display: flex; flex-direction: column; }
.aiw__src { padding: 12px 14px 14px; border-radius: var(--r); background: #0c120e; border: 1px solid var(--paper-12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.aiw__k { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .8125rem; font-weight: 600; color: var(--paper); }
.aiw__k svg { width: 14px; height: 14px; color: var(--lilac); }
.aiw__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.aiw__fields li { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: var(--r-sm); background: rgba(244, 244, 241, .06); }
.aiw__fields small { font-size: .6875rem; font-weight: 600; color: var(--paper-48); }
.aiw__fields b { font-size: .8125rem; font-weight: 600; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aiw__wire { position: relative; width: 2px; height: 38px; margin: 0 auto; background: var(--paper-24); }
.aiw__wire i { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--lilac); animation: wire-down 1.8s linear infinite; }
.aiw__wire i:nth-child(2) { animation-delay: -.6s; }
.aiw__wire i:nth-child(3) { animation-delay: -1.2s; }
@keyframes wire-down { 0% { top: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
.aiw__outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.aiw__outs li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(244, 244, 241, .06); border: 1px solid var(--paper-12); color: var(--paper); font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.aiw__outs svg { width: 16px; height: 16px; flex: none; color: var(--acc); }
.js .aiw__outs li { opacity: 0; transform: translateY(8px); }
.js .is-in .aiw__outs li { animation: hlx-in .6s var(--ease-out) both; }
.js .is-in .aiw__outs li:nth-child(1) { animation-delay: .5s; } .js .is-in .aiw__outs li:nth-child(2) { animation-delay: .62s; }
.js .is-in .aiw__outs li:nth-child(3) { animation-delay: .74s; } .js .is-in .aiw__outs li:nth-child(4) { animation-delay: .86s; }

/* the difference, in one line each */
.fut__vs { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.fut__side { align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-lg); background: rgba(244, 244, 241, .04); border: 1px solid var(--paper-12); }
.fut__side p { font-size: var(--t-lead); line-height: 1.4; letter-spacing: -.02em; color: var(--paper-64); }
.fut__lab { font-size: .8125rem; font-weight: 600; color: var(--paper-48); }
.fut__side--us { background: var(--mint); border-color: var(--mint); }
.fut__side--us p { color: var(--ink); font-weight: 500; }
.fut__side--us .fut__lab { color: var(--ink-64); }
.fut__arrow { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); background: var(--forest-2); border: 1px solid var(--paper-12); color: var(--mint); }
.fut__arrow svg { width: 14px; height: 14px; }
.fut__src { margin-top: 18px; color: var(--paper-48); }
.fut__src a { color: var(--paper-64); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--paper-24); }
.fut__src a:hover { color: var(--paper); text-decoration-color: currentColor; }

@media (max-width: 991px) {
  .fut { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  .fut__card { grid-row: auto; grid-template-rows: auto 1fr; }
  .fut__vs { grid-template-columns: minmax(0, 1fr); }
  .fut__arrow { justify-self: center; transform: rotate(90deg); }
  .fut__src { max-width: none; }
}
@media (max-width: 479px) {
  .fut__art { min-height: 0; padding: 16px; }
  .repo__top { flex-wrap: wrap; }
  .aiw__fields b { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .repo__host { animation: none; }
  .repo__host:nth-child(2) { background: var(--gold); color: var(--ink); }
  .aiw__wire i { animation: none; opacity: 0; }
  .js .aiw__outs li { opacity: 1; transform: none; }
}

/* =====================================================================
   Credentials: Wix Legend Partner and Wix Headless Specialist
   A seal in the brand colours (gold for Legend, mint for Headless), in the
   footer and mobile menu as full badges, and in the header as one compact
   badge that swaps between the two.
   ===================================================================== */
.credbs { display: flex; flex-wrap: wrap; gap: 8px; }
.credb { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: var(--r); background: var(--card); border: 1px solid var(--ink-12); }
.credb--legend { --acc: var(--gold); }
.credb--headless { --acc: var(--mint); }
.credb__seal { width: 40px; height: 40px; flex: none; }
.credb__seal svg, .navcred__seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.credb__shape { fill: var(--acc); transform-box: fill-box; transform-origin: center; animation: seal-turn 48s linear infinite; }
.credb__mark { fill: var(--ink); }
.credb__line { stroke: var(--ink); }
@keyframes seal-turn { to { transform: rotate(360deg); } }
.credb__t { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.credb__t small { font-size: .6875rem; font-weight: 600; color: var(--ink-48); }
.credb__t b { font-size: .875rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

.footer__about .credbs { margin-top: 2px; flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; }
.footer .credb { background: rgba(244, 244, 241, .05); border-color: var(--paper-12); }
.footer .credb__t small { color: var(--paper-48); }
.footer .credb__t b { color: var(--paper); }
.mpanel__creds { padding-top: 18px; }
.mpanel__creds .credbs { flex-direction: column; }
.mpanel__creds .credb { width: 100%; }

/* header: one compact credential beside Talk to Ryan, swapping every few seconds */
.navcred { display: none; align-items: center; gap: 10px; height: 36px; padding-right: 16px; margin-right: 8px; border-right: 1px solid var(--ink-12); white-space: nowrap; transition: border-color .45s var(--ease); }
.navcred__seal { grid-area: 1 / 1; width: 28px; height: 28px; transition: opacity .7s var(--ease), transform .9s var(--ease-out); }
.navcred__roll { position: relative; display: block; height: 2.5em; clip-path: inset(0 -.2em); font-size: .75rem; line-height: 1.25; }
.navcred__item { display: flex; flex-direction: column; height: 2.5em; justify-content: center; transition: transform .8s var(--ease-out); }
.navcred__item b { font-weight: 700; letter-spacing: -.01em; }
.navcred__item small { font-size: .6875rem; font-weight: 500; color: var(--ink-48); }
.navcred.is-alt .navcred__item { transform: translateY(-100%); }
.navcred.is-alt .navcred__seal.credb--legend, .navcred:not(.is-alt) .navcred__seal.credb--headless { opacity: 0; transform: rotate(-40deg) scale(.7); }
.nav-dark .navcred { border-color: var(--paper-24); }
.nav-dark .navcred__item small { color: var(--paper-48); }
@media (min-width: 1280px) {
  .navcred { display: inline-grid; grid-template-columns: 28px auto; column-gap: 10px; align-items: center; }
  .navcred__seal { grid-column: 1; grid-row: 1; }
  .navcred__roll { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .credb__shape { animation: none; }
}

/* ---------- Abstract artwork in place of busy photos behind cards ---------- */
.art-fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pair__img--art, .proof__card--art { position: relative; overflow: hidden; background: #f3f2ec; }
.proof__card--art > :not(.art-fill) { position: relative; z-index: 2; }
.proof__card--art .art-fill { z-index: 0; }
.pair__img--art .float-card { z-index: 2; }
.ag__ring { transform-box: fill-box; transform-origin: center; animation: ag-ping 2.6s var(--ease-out) infinite; }
@keyframes ag-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.js .ag__bars rect { transform-box: fill-box; transform-origin: bottom; transform: scaleY(.15); transition: transform 1.2s var(--ease-out); }
.js .is-in .ag__bars rect { transform: none; }
.js .is-in .ag__bars rect:nth-child(2) { transition-delay: .06s; } .js .is-in .ag__bars rect:nth-child(3) { transition-delay: .12s; }
.js .is-in .ag__bars rect:nth-child(4) { transition-delay: .18s; } .js .is-in .ag__bars rect:nth-child(5) { transition-delay: .24s; }
.js .is-in .ag__bars rect:nth-child(6) { transition-delay: .3s; } .js .is-in .ag__bars rect:nth-child(7) { transition-delay: .36s; }
.js .is-in .ag__bars rect:nth-child(8) { transition-delay: .42s; }
@media (max-width: 479px) {
  /* QA18 finding 10: on phones the art is shown whole across the top (not sliced to the card's height), so the
     speech tiles stay inside the panel and the stars sit clear above the quote, which starts just below them */
  .proof__card--photo.proof__card--art { padding-top: calc(62% + 10px); }
  .proof__card--photo .art-fill { bottom: auto; height: auto; aspect-ratio: 900 / 640; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .ag__ring { animation: none; opacity: 0; }
  .js .ag__bars rect { transform: none; }
}

/* ---------- Team: portraits out of their circles, smaller, on a tinted tile ---------- */
.member { flex-direction: row; align-items: flex-start; gap: 18px; padding: 14px 18px 14px 14px; }
.member__img { flex: none; width: clamp(92px, 8vw, 124px); aspect-ratio: 4 / 5; border-radius: var(--r-sm); background: var(--acc-wash, var(--paper-2)); overflow: hidden; display: block; }
.member__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); mix-blend-mode: multiply; }
.member__txt { padding: 2px 0 0; gap: 6px; }
.member__txt .h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.team .member:nth-child(1) { --acc-wash: var(--gold-wash); }
.team .member:nth-child(2) { --acc-wash: var(--sky-wash); }
.team .member:nth-child(3) { --acc-wash: var(--lilac-wash); }
@media (max-width: 1180px) and (min-width: 768px) { .team { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer: Wix Headless feature card and a "New" tag ---------- */
.fpromo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--mint); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 30px 60px -36px rgba(130, 244, 133, .55); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.fpromo:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 36px 70px -34px rgba(130, 244, 133, .75); }
.fpromo__seal { width: 56px; height: 56px; --acc: var(--ink); }
.fpromo__seal .credb__shape { fill: var(--ink); }
.fpromo__seal .credb__line { stroke: var(--mint); }
.fpromo__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fpromo__k { font-size: .75rem; font-weight: 700; color: var(--ink-64); }
.fpromo__h { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height: 1.1; letter-spacing: -.03em; }
.fpromo__d { font-size: .9375rem; color: var(--ink-80); }
.fpromo__cta { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: var(--r); background: var(--ink); color: var(--mint); font-weight: 600; white-space: nowrap; }
.fpromo__arr { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--mint); color: var(--ink); transition: transform .45s var(--ease-out); }
.fpromo__arr svg { width: 14px; height: 14px; }
.fpromo:hover .fpromo__arr { transform: translateX(3px); }
body[data-page="headless"] .fpromo { display: none; }
.footer__hl { color: var(--paper) !important; font-weight: 600 !important; }
.fnew { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 3px; background: var(--mint); color: var(--ink); font-size: .625rem; font-weight: 700; letter-spacing: .01em; }
@media (max-width: 767px) {
  .fpromo { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
  .fpromo__cta { justify-self: start; }
  .fpromo__seal { width: 44px; height: 44px; }
}

/* stat cards: room for longer figures like £500K+ */
.proof__stat { width: min(340px, 100%); }
.proof__stat .bignum { font-size: clamp(3rem, 2.3rem + 2.3vw, 4.6rem); }

/* QA18 finding 18 (18 Oct): the five-step rows (home "Five steps", Wix Headless "How the move works") never leave an
   empty slot: 3 + 2 on tablets with the last two wider, and 2 + 2 + 1 on large phones with the last one full width */
@media (min-width: 768px) and (max-width: 1180px) {
  .process, .moves { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .process > li, .moves > li { grid-column: span 2; }
  .process > li:nth-child(n+4), .moves > li:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .process > li:nth-child(5), .moves > li:nth-child(5) { grid-column: 1 / -1; }
}
/* QA18 finding 19: with reduced motion the footer's static service list sits in even rows (3 + 3, or 2 + 2 + 2 on
   phones) wherever all six don't fit on one line, so "Made in Wigan" is never left alone */
@media (prefers-reduced-motion: reduce) and (max-width: 1439px) {
  .footer__track { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; column-gap: clamp(24px, 4vw, 56px); row-gap: 14px; }
  .footer__track li { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 479px) {
  .footer__track { grid-template-columns: repeat(2, max-content); column-gap: 20px; }
}
/* QA18 finding 21: FAQ questions wrap in balanced lines, so a question never ends on one lonely word */
.faq__item .acc__btn { text-wrap: balance; }
/* QA18 finding 22: once the proof cards stack (480 to 991px) there's no card beside the quote to match in height,
   so the quote card hugs its words, centred on the artwork, instead of stretching with a big gap above the name */
@media (min-width: 480px) and (max-width: 991px) {
  .proof__card--photo { align-items: center; }
}
/* QA18 (finding 1's rule, on the Wix Headless hero too): nothing sits on the Trent screenshot's words. The screenshot
   doesn't move here, so the "Wix dashboard" chip sits in the photo's clear area under Trent's logo (8px of room for its
   float), and the quote and the SEO chip sit just under the browser. 14.3cqw + 50px is the browser's top (9% of the
   stage plus the 38px bar) plus 7% of the screenshot's height (Trent's nav) plus 12px. */
@media (min-width: 768px) {
  .hero--hl .hero__stage { container-type: inline-size; }
  .hero--hl .hchip--cms { top: calc(14.3cqw + 50px); }
  .hero--hl .hero__quote, .hero--hl .hchip--seo { top: calc(83% + 12px); bottom: auto; }
  .hero--hl .hchip--seo { right: 9%; }
}
/* the taller chip, with the heading field, only where the clear area is tall enough for it */
@container (max-width: 669px) { .hero--hl .hchip--cms { width: auto; } .hero--hl .hchip--cms .hchip__field { display: none; } }
@media (max-width: 767px) {
  .hero--hl .hchip--cms { top: calc(76px + (100cqw - 8px) * .0662); }
  .hero--hl .hchip--seo { display: none; }
}
@media (max-width: 359px) { .hero--hl .hchip--cms { display: none; } }   /* too tall for the clear area this narrow */
@media (min-width: 768px) and (max-width: 991px) { .hero--hl .hero__stage { margin-bottom: 16px; } }   /* room for the quote under the browser */
/* QA18 (finding 1's rule, Trent case study figure): the /properties browser meets the home page's browser at its empty
   right margin (from 64%, where the screenshot has no words) instead of covering its text, and the Property feed chip
   never sits on the screenshot: under it on desktop, in the panel's free top-right corner when stacked, gone on phones */
.tcase__br--side { width: 31%; }
@media (max-width: 991px) { .tcase__chip { top: 6%; bottom: auto; left: auto; right: 5%; } }
@media (max-width: 767px) {
  .tcase__br--main { width: 62%; }
  .tcase__br--side { right: 3%; width: 32%; }
  .tcase__br .hlx__bar i { display: none; }   /* room for both addresses in the narrower frames */
  .tcase__br .hlx__bar span { margin-left: 0; }
  .tcase__chip { display: none; }
}