/* =====================================================================
   Studio concept: the sections added for the studio version of the site
   (home: hero notifications, the studio, What Wix can do, local; the
   Studio page: our own brands). Loaded after site.css and motion.css.
   ===================================================================== */

/* ---------- Hero: a live dot on the eyebrow, and notifications round the reel ---------- */
.hero__eyebrow { gap: 8px; }
.hero__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-deep); flex: none; }
.hero__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--mint-deep); animation: dot-ping 2.4s var(--ease-out) infinite; }
@keyframes dot-ping { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
.hero--studio .hero__title { max-width: 10.5em; }
.hchip__row { display: flex; align-items: center; gap: 10px; }
.hchip__ic { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--acc) 35%, #fff); }
.hchip__ic svg { width: 15px; height: 15px; color: var(--ink); }
.hchip__row b { display: block; font-size: .875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; white-space: nowrap; }
.hchip__row small { display: block; font-size: .75rem; color: var(--ink-64); line-height: 1.3; white-space: nowrap; }
.hchip--note .hchip__rank svg { color: var(--coral-deep); }

/* ---------- The studio: a statement, and the three people behind it ---------- */
.studio__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.studio__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.studio__txt .statement { max-width: 24em; font-size: clamp(1.25rem, 1rem + .85vw, 1.75rem); line-height: 1.22; }
.crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); }
.crew__m { display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 16px; border-radius: var(--r); background: var(--paper); }
.crew__m:nth-child(1) { --acc-wash: var(--gold-wash); }
.crew__m:nth-child(2) { --acc-wash: var(--sky-wash); }
.crew__m:nth-child(3) { --acc-wash: var(--lilac-wash); }
.crew__img { aspect-ratio: 4 / 5; border-radius: var(--r-sm); overflow: hidden; background: var(--acc-wash); margin-bottom: 10px; }
.crew__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); mix-blend-mode: multiply; transition: transform .9s var(--ease-out); }
.crew__m:hover .crew__img img { transform: scale(1.04); }
.crew__m b { padding-inline: 6px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.crew__m small { padding-inline: 6px; font-size: .8125rem; line-height: 1.35; color: var(--ink-64); }

/* ---------- What Wix can do: one tab per kind of business ---------- */
.wx__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 5px; margin-bottom: 8px; border-radius: var(--r-lg); background: var(--paper); }
.wx__tab {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px 12px; border-radius: var(--r);
  font-weight: 600; font-size: .9375rem; letter-spacing: -.015em; line-height: 1.2; text-align: left; color: var(--ink-64);
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.wx__tab svg { box-sizing: content-box; width: 17px; height: 17px; padding: 7px; flex: none; border-radius: var(--r-sm); background: var(--acc-wash); color: var(--acc-deep); transition: background-color .3s var(--ease), color .3s var(--ease); }
.wx__tab:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.wx__tab[aria-selected="true"] { color: var(--ink); background: var(--card); box-shadow: 0 1px 2px rgba(15, 21, 18, .08), 0 12px 26px -18px rgba(15, 21, 18, .45); }
.wx__tab[aria-selected="true"] svg { background: var(--acc); color: var(--ink); }
.wx__prog { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; }
.wx__tabs.is-auto .wx__tab[aria-selected="true"] .wx__prog { background: var(--ink-06); }
.wx__tabs.is-auto .wx__tab[aria-selected="true"] .wx__prog::after { content: ""; position: absolute; inset: 0; background: var(--acc-deep); transform-origin: 0 50%; animation: wx-prog var(--wx-dur, 7s) linear forwards; }
.wx__tabs.is-paused .wx__prog::after { animation-play-state: paused !important; }
@keyframes wx-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.wx__panel { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(22px, 3.2vw, 52px); border-radius: var(--r-lg); background: var(--acc-wash); }
.wx__panel[hidden] { display: none; }
.wx__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 30em; }
.wx__txt .h3 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem); letter-spacing: -.035em; }
.wx__txt p { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -.02em; color: var(--ink-80); }
.wx__txt .link { padding-block: 4px; }
.wx__built { display: flex; flex-wrap: wrap; gap: 6px; }
.wx__built li { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: var(--r-sm); background: var(--card); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.wx__built li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--acc-deep); }
.wx__stage { position: relative; padding-bottom: 30px; }
.wx__br { 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); }
.wx__chrome { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #f1f2ee; border-bottom: 1px solid var(--ink-12); }
.wx__chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(15, 21, 18, .16); flex: none; }
.wx__chrome span { margin-inline: auto; display: inline-flex; align-items: center; height: 22px; max-width: 72%; padding: 0 10px; border-radius: var(--r-sm); background: #fff; font-size: .6875rem; color: var(--ink-64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx__vp { position: relative; aspect-ratio: 56 / 35; container-type: inline-size; overflow: hidden; background: #fff; }
.wx__toast { position: absolute; z-index: 2; left: clamp(-20px, -1.4vw, -8px); bottom: 0; display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 11px; border-radius: var(--r); background: var(--card); border: 1px solid var(--ink-12); border-left: 3px solid var(--acc-deep); box-shadow: 0 26px 48px -24px rgba(15, 21, 18, .55); }
.wx__ti { width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--acc); }
.wx__ti svg { width: 17px; height: 17px; color: var(--ink); }
.wx__toast b { display: block; font-size: .875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.wx__toast small { display: block; font-size: .75rem; line-height: 1.35; color: var(--ink-64); }
.wx__note { margin-top: 14px; font-size: .8125rem; color: var(--ink-48); }

/* each panel arrives: copy first, then the site, then the notification */
.wx__panel:not([hidden]) .wx__txt > * { animation: wx-in .7s var(--ease-out) both; }
.wx__panel:not([hidden]) .wx__txt > :nth-child(2) { animation-delay: .06s; }
.wx__panel:not([hidden]) .wx__txt > :nth-child(3) { animation-delay: .12s; }
.wx__panel:not([hidden]) .wx__txt > :nth-child(4) { animation-delay: .18s; }
.wx__panel:not([hidden]) .wx__br { animation: wx-in .8s var(--ease-out) .08s both; }
.wx__panel:not([hidden]) .wx__toast { animation: wx-toast .7s var(--ease-out) .75s both; }
@keyframes wx-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes wx-toast { from { opacity: 0; transform: translateY(16px) scale(.96); } }

/* ---------- The example sites. Drawn on a 560 x 350 canvas: 1em is 10 units at any size ---------- */
.mk { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: calc(100cqw / 56); line-height: 1.3; letter-spacing: -.01em; text-align: left; color: var(--mk-ink, #1f1d1a); background: var(--mk-bg, #fff); }
.mk p { margin: 0; }
.mk b, .mk em, .mk i, .mk small { font-style: normal; }
.mk svg { display: block; }
.mk__nav { flex: none; height: 4.4em; display: flex; align-items: center; gap: 2.2em; padding: 0 2.4em; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.mk__logo { display: inline-flex; align-items: baseline; gap: .3em; font-family: var(--f-display); font-size: 1.7em; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; color: var(--mk-ink); }
.mk__logo small { font-family: var(--f-text); font-size: .55em; font-weight: 600; letter-spacing: .02em; opacity: .6; }
.mk__links { display: flex; gap: 1.6em; margin-left: auto; }
.mk__links i { width: 4em; height: .7em; border-radius: .35em; background: rgba(0, 0, 0, .12); }
.mk__cta { display: inline-flex; align-items: center; height: 2.6em; padding: 0 1.3em; border-radius: 1.3em; background: var(--mk-acc); color: var(--mk-on, #fff); font-size: 1.15em; font-weight: 600; white-space: nowrap; }
.mk__h { font-family: var(--f-display); font-size: 1.7em; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; color: var(--mk-ink); }

/* bookings */
.mk--book { --mk-bg: #fbf6f1; --mk-ink: #3b2232; --mk-acc: #74405f; --mk-soft: #f3e1e4; }
.mkb { flex: 1; min-height: 0; display: grid; grid-template-columns: 23em minmax(0, 1fr); gap: 2.4em; padding: 2em 2.4em; }
.mkb__svc { display: flex; flex-direction: column; gap: .9em; }
.mkb__svc .mk__h { margin-bottom: .25em; }
.mkb__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1em; height: 4.8em; padding: 0 1.4em; border-radius: .8em; background: #fff; border: 1px solid rgba(59, 34, 50, .1); }
.mkb__row b { display: block; font-size: 1.25em; font-weight: 600; }
.mkb__row small { display: block; font-size: 1.05em; color: rgba(59, 34, 50, .76); }
.mkb__row em { font-size: 1.25em; font-weight: 600; }
.mkb__row.is-on { background: var(--mk-soft); box-shadow: inset 0 0 0 .15em var(--mk-acc); border-color: transparent; }
.mkb__tick { position: absolute; right: -.7em; top: -.7em; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--mk-acc); color: #fff; }
.mkb__tick svg { width: 1.1em; height: 1.1em; }
.mkb__cal { display: flex; flex-direction: column; gap: .7em; padding: 1.5em 1.8em; border-radius: 1em; background: #fff; border: 1px solid rgba(59, 34, 50, .1); }
.mkb__mon { display: flex; justify-content: space-between; align-items: center; }
.mkb__mon b { font-size: 1.35em; font-weight: 600; }
.mkb__mon span { display: flex; gap: .5em; }
.mkb__mon span i { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--mk-soft); font-size: 1.1em; line-height: 1; }
.mkb__dow, .mkb__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25em .4em; text-align: center; }
.mkb__dow i { font-size: 1em; font-weight: 600; color: rgba(59, 34, 50, .45); }
.mkb__days i { height: 2em; display: grid; place-items: center; border-radius: .6em; font-size: 1.05em; color: rgba(59, 34, 50, .38); }
.mkb__days i.is-av { color: var(--mk-ink); font-weight: 600; background: var(--mk-soft); }
.mkb__days i.is-on { color: #fff; font-weight: 700; background: var(--mk-acc); }
.mkb__times { display: flex; gap: .5em; margin-top: .3em; }
.mkb__times i { flex: 1; height: 2.5em; display: grid; place-items: center; border-radius: .6em; border: 1px solid rgba(59, 34, 50, .15); font-size: 1.05em; font-weight: 600; }
.mkb__times i.is-on { color: #fff; background: var(--mk-acc); border-color: var(--mk-acc); }
.wx__panel:not([hidden]) .mkb__times i.is-on, .wx__panel:not([hidden]) .mkb__days i.is-on { animation: mk-pick .5s var(--ease-out) .5s both; }
@keyframes mk-pick { from { transform: scale(.7); opacity: 0; } }

/* shop */
.mk--shop { --mk-bg: #f6f2ea; --mk-ink: #2f3524; --mk-acc: #4c5a35; }
.mk__bag { position: relative; margin-left: .4em; color: var(--mk-ink); }
.mk__bag svg { width: 2.1em; height: 2.1em; }
.mk__bag b { position: absolute; right: -.7em; top: -.5em; min-width: 1.7em; height: 1.7em; border-radius: .85em; display: grid; place-items: center; background: var(--mk-acc); color: #fff; font-size: .95em; font-weight: 700; }
.mks { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.5em; padding: 2em 2.4em; }
.mks__head { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.mks__filters { display: flex; gap: .5em; }
.mks__filters i { display: inline-flex; align-items: center; height: 2.3em; padding: 0 1em; border-radius: 1.15em; border: 1px solid rgba(47, 53, 36, .18); font-size: 1em; font-weight: 600; white-space: nowrap; }
.mks__filters i.is-on { color: #fff; background: var(--mk-ink); border-color: transparent; }
.mks__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6em; }
.mks__card { position: relative; min-height: 0; display: flex; flex-direction: column; gap: .2em; }
.mks__img { position: relative; flex: 1; min-height: 0; margin-bottom: .8em; border-radius: .9em; overflow: hidden; display: grid; place-items: end center; background: linear-gradient(165deg, var(--a), var(--b)); }
.mks__jar { position: relative; width: 6.8em; height: 8em; margin-bottom: 2.2em; border-radius: 1em 1em 1.4em 1.4em; background: rgba(255, 255, 255, .5); box-shadow: inset 0 -2.4em 0 rgba(255, 255, 255, .3), 0 1.4em 2em -1.2em rgba(0, 0, 0, .35); }
.mks__jar::before { content: ""; position: absolute; left: 1.1em; right: 1.1em; top: 2.8em; height: 2.3em; border-radius: .3em; background: rgba(255, 255, 255, .9); }
.mks__jar::after { content: ""; position: absolute; left: 50%; top: -.55em; width: .16em; height: .65em; margin-left: -.08em; background: #3b3329; }
.mks__jar i { position: absolute; left: 50%; top: -2em; width: .9em; height: 1.5em; margin-left: -.45em; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 50% 70%, #fff4c9, #ffb547 60%); box-shadow: 0 0 1.4em .2em rgba(255, 190, 90, .7); animation: mk-flame 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes mk-flame { 50% { transform: scaleY(1.12) rotate(3deg); } }
.mks__card b { font-size: 1.3em; font-weight: 600; }
.mks__card small { font-size: 1.05em; color: rgba(47, 53, 36, .6); }
.mks__card em { font-size: 1.2em; font-weight: 700; }
.mks__add { position: absolute; right: .8em; top: .8em; display: inline-flex; align-items: center; gap: .35em; height: 2.4em; padding: 0 1em; border-radius: 1.2em; color: #fff; background: var(--mk-acc); font-size: 1em; font-weight: 600; }
.mks__add svg { width: 1.1em; height: 1.1em; }
.wx__panel:not([hidden]) .mks__add, .wx__panel:not([hidden]) .mk__bag b { animation: mk-pick .5s var(--ease-out) .55s both; }

/* trades */
.mk--trade { --mk-bg: #fff; --mk-ink: #13233a; --mk-acc: #f08a24; --mk-on: #13233a; }
.mkt__mark { display: inline-block; width: .9em; height: .7em; margin-right: .15em; background: var(--mk-acc); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mkt { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 23em; }
.mkt__hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1.2em; padding: 2.8em 2.6em 2.4em; color: #fff; background: #13233a; }
.mkt__hero::after { content: ""; position: absolute; right: -5em; bottom: -7em; width: 24em; height: 17em; background: #fff; opacity: .07; clip-path: polygon(50% 0, 100% 55%, 100% 100%, 0 100%, 0 55%); }
.mkt__h { font-family: var(--f-display); font-size: 2.8em; font-weight: 500; line-height: 1.02; letter-spacing: -.035em; max-width: 8em; }
.mkt__p { max-width: 20em; font-size: 1.2em; color: rgba(255, 255, 255, .7); }
.mkt__ticks { display: flex; flex-direction: column; gap: .5em; }
.mkt__ticks li { display: flex; align-items: center; gap: .6em; font-size: 1.15em; font-weight: 600; }
.mkt__ticks svg { width: 1.1em; height: 1.1em; color: var(--mk-acc); }
.mkt__stars { display: flex; align-items: center; gap: .2em; margin-top: auto; color: #ffc44d; }
.mkt__stars svg { width: 1.3em; height: 1.3em; }
.mkt__stars small { margin-left: .6em; font-size: 1em; color: rgba(255, 255, 255, .65); }
.mkt__form { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .8em; padding: 2em 2.2em; background: #f4f6f8; }
.mkt__form .mk__h { width: 100%; margin-bottom: .15em; }
.mkt__f { width: 100%; display: flex; flex-direction: column; gap: .2em; padding: .75em 1.1em; border-radius: .7em; background: #fff; border: 1px solid rgba(19, 35, 58, .12); min-width: 0; }
.mkt__f--half { width: calc(50% - .4em); }
.mkt__f--area { min-height: 5.6em; }
.mkt__f small { font-size: .95em; font-weight: 600; color: rgba(19, 35, 58, .55); }
.mkt__f b { font-size: 1.15em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt__btn { width: 100%; height: 3.4em; border-radius: .7em; display: grid; place-items: center; background: var(--mk-acc); color: var(--mk-on, #fff); font-size: 1.2em; font-weight: 700; }
.wx__panel:not([hidden]) .mk--trade .mkt__btn { animation: mk-press 1.6s var(--ease-out) .5s both; }
@keyframes mk-press { 0%, 40% { transform: none; } 55% { transform: scale(.96); } 70%, 100% { transform: none; } }

/* restaurants */
.mk--food { --mk-bg: #faf4ec; --mk-ink: #3a2418; --mk-acc: #b5532c; }
.mkf { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 19em; gap: 2.4em; padding: 2em 2.4em; }
.mkf__menu { display: flex; flex-direction: column; min-width: 0; }
.mkf__tabs { display: flex; gap: 1.6em; margin-bottom: .4em; border-bottom: 1px solid rgba(58, 36, 24, .12); }
.mkf__tabs i { padding-bottom: .6em; font-size: 1.2em; font-weight: 600; color: rgba(58, 36, 24, .45); }
.mkf__tabs i.is-on { color: var(--mk-ink); box-shadow: inset 0 -.18em 0 var(--mk-acc); }
.mkf__item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2em; padding: 1em 0; border-bottom: 1px dashed rgba(58, 36, 24, .18); }
.mkf__item b { display: block; font-family: var(--f-display); font-size: 1.45em; font-weight: 500; letter-spacing: -.02em; }
.mkf__item small { display: block; font-size: 1.05em; color: rgba(58, 36, 24, .6); }
.mkf__item em { font-size: 1.25em; font-weight: 600; color: var(--mk-acc); white-space: nowrap; }
.mkf__book { align-self: start; display: flex; flex-direction: column; gap: .8em; padding: 1.7em; border-radius: 1em; background: #fff; border: 1px solid rgba(58, 36, 24, .1); }
.mkf__sel { display: flex; justify-content: space-between; align-items: center; padding: .85em 1.1em; border-radius: .7em; background: var(--mk-bg); }
.mkf__sel small { font-size: 1em; font-weight: 600; color: rgba(58, 36, 24, .55); }
.mkf__sel b { font-size: 1.15em; font-weight: 600; }
.mkf__times { display: flex; gap: .5em; }
.mkf__times i { flex: 1; height: 2.5em; display: grid; place-items: center; border-radius: .6em; border: 1px solid rgba(58, 36, 24, .15); font-size: 1.05em; font-weight: 600; }
.mkf__times i.is-on { color: #fff; background: var(--mk-acc); border-color: transparent; }
.mk--food .mkt__btn { background: var(--mk-ink); color: #fff; }
.wx__panel:not([hidden]) .mkf__times i.is-on { animation: mk-pick .5s var(--ease-out) .5s both; }

/* property listings (Trent, on Wix Headless) */
.mkp__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.mkp__cms { position: absolute; right: 2em; bottom: 2em; width: 23em; display: flex; flex-direction: column; gap: .75em; padding: 1.4em 1.5em; border-radius: 1em; background: #fff; border: 1px solid var(--ink-12); box-shadow: 0 1.6em 3.2em -1.2em rgba(15, 21, 18, .5); color: var(--ink); }
.mkp__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.mkp__top b { font-size: 1.3em; font-weight: 700; }
.mkp__top small { font-size: .95em; font-weight: 600; color: var(--ink-48); white-space: nowrap; }
.mkp__row { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: .9em; align-items: center; padding-top: .75em; border-top: 1px solid var(--ink-12); }
.mkp__row > i { width: 3em; height: 2.3em; border-radius: .4em; background: linear-gradient(135deg, #d6e4ec, #a9c3d1); }
.mkp__row span { display: flex; flex-direction: column; gap: .4em; }
.mkp__row span b { height: .7em; border-radius: .35em; background: var(--ink-12); }
.mkp__row span b + b { width: 60%; background: var(--ink-06); }
.mkp__row em { padding: .3em .7em; border-radius: .4em; font-size: .95em; font-weight: 700; background: var(--mint-wash); color: #1f6b34; }
.mkp__row.is-new em { background: var(--mint); color: var(--ink); }
.mkp__sync { display: flex; align-items: center; gap: .6em; padding-top: .75em; border-top: 1px solid var(--ink-12); font-size: 1em; font-weight: 600; color: var(--ink-64); }
.mkp__spin { width: 1em; height: 1em; border-radius: 50%; border: .18em solid var(--mint-deep); border-right-color: transparent; animation: mk-spin 1.1s linear infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }
.wx__panel:not([hidden]) .mkp__row.is-new { animation: mk-row .7s var(--ease-out) .6s both; }
@keyframes mk-row { from { opacity: 0; transform: translateX(-1.4em); } }

/* courses */
.mk--course { --mk-bg: #f3f7f6; --mk-ink: #12352f; --mk-acc: #1f7a68; }
.mkc { flex: 1; min-height: 0; display: grid; grid-template-columns: 22em minmax(0, 1fr); gap: 2.4em; padding: 2em 2.4em; }
.mkc__list { display: flex; flex-direction: column; gap: .75em; min-width: 0; }
.mkc__prog { height: .8em; margin-top: .3em; border-radius: .4em; overflow: hidden; background: rgba(18, 53, 47, .1); }
.mkc__prog i { display: block; height: 100%; border-radius: inherit; background: var(--mk-acc); }
.mkc__pc { margin-bottom: .3em; font-size: 1em; font-weight: 600; color: rgba(18, 53, 47, .6); }
.mkc__step { display: flex; align-items: center; gap: 1em; min-width: 0; padding: .95em 1.2em; border-radius: .8em; background: #fff; border: 1px solid rgba(18, 53, 47, .1); }
.mkc__step > i { width: 2.2em; height: 2.2em; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1em; font-weight: 700; background: rgba(18, 53, 47, .08); }
.mkc__step > i svg { width: 1.1em; height: 1.1em; }
.mkc__step.is-done > i { color: #fff; background: var(--mk-acc); }
.mkc__step.is-now { box-shadow: inset 0 0 0 .15em var(--mk-acc); border-color: transparent; }
.mkc__step b { font-size: 1.15em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkc__player { position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 1.2em; background: radial-gradient(80% 70% at 70% 20%, #2b7d6c, transparent 70%), linear-gradient(140deg, #12352f, #1b4d43); }
.mkc__play { width: 6em; height: 6em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: var(--mk-ink); box-shadow: 0 1em 2.4em -1em rgba(0, 0, 0, .5); }
.mkc__play svg { width: 2em; height: 2em; margin-left: .3em; }
.mkc__bar { position: absolute; left: 1.6em; right: 1.6em; bottom: 1.6em; height: .5em; border-radius: .25em; background: rgba(255, 255, 255, .25); }
.mkc__bar i { display: block; width: 35%; height: 100%; border-radius: inherit; background: #fff; }
.mkc__player small { position: absolute; left: 1.6em; top: 1.4em; font-size: 1.05em; font-weight: 600; color: rgba(255, 255, 255, .75); }
.wx__panel:not([hidden]) .mkc__prog i { animation: mk-grow 1.4s var(--ease-out) .4s both; }
@keyframes mk-grow { from { width: 0; } }

/* ---------- Local: the studio on a map, with the towns around it ---------- */
.local__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.local__map { position: relative; overflow: hidden; aspect-ratio: 560 / 460; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--ink-12); box-shadow: 0 30px 70px -50px rgba(15, 21, 18, .35); }
/* the light local graphic (tools/art/local_map.py draws it, site.js sizes the chips) */
.lmap { display: block; width: 100%; height: 100%; font-family: var(--f-text); }
.lmap__arcs path { stroke: rgba(15, 21, 18, .24); stroke-width: 1.4; stroke-dasharray: .01 5.5; stroke-linecap: round; }
.lmap__bg { fill: #fff; stroke: rgba(15, 21, 18, .1); }
.lmap__chip text { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; fill: var(--ink); }
.lmap__chip { filter: drop-shadow(0 3px 6px rgba(15, 21, 18, .07)); }
.lmap__dot { fill: var(--c); stroke: #fff; stroke-width: 2.5; }
.lmap__pulse { fill: none; stroke: var(--mint-deep); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: lmap-ping 3s var(--ease-out) infinite; }
@keyframes lmap-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(3.4); opacity: 0; } }
.lmap__run { fill: var(--c); opacity: 0; offset-rotate: 0deg; animation: lmap-run 6s var(--ease) infinite; animation-delay: calc(var(--i) * -1.1s); }
@keyframes lmap-run { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: .9; } 82% { opacity: .9; } 100% { offset-distance: 100%; opacity: 0; } }
.js .local__map .lmap__arcs path { opacity: 0; transition: opacity .8s var(--ease); transition-delay: calc(var(--i) * 60ms + 200ms); }
.js .local__map.is-in .lmap__arcs path { opacity: 1; }
.js .local__map .lmap__chip { opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity .5s var(--ease), transform .6s var(--ease-out); transition-delay: calc(var(--i) * 70ms + 380ms); }
.js .local__map.is-in .lmap__chip { opacity: 1; transform: none; }
.lmap__key { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 28px); padding: 8px 12px 8px 10px; border-radius: var(--r); background: var(--ink); color: var(--paper-64); font-size: .8125rem; line-height: 1.3; }
.lmap__key i { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(130, 244, 133, .25); }
.lmap__key b { color: var(--paper); font-weight: 600; margin-right: 4px; }
.local__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.local__list { display: flex; flex-direction: column; gap: var(--tile-gap); width: 100%; }
.local__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px 16px 16px; border-radius: var(--r); background: var(--card); }
.local__list b { display: block; margin-bottom: 2px; font-weight: 600; letter-spacing: -.02em; }
.local__list p { font-size: .9375rem; color: var(--ink-64); }
.local__areas { margin-top: clamp(28px, 3vw, 44px); padding-top: 20px; border-top: 1px solid var(--ink-12); font-size: .9375rem; color: var(--ink-64); }
.local__areas b { color: var(--ink); font-weight: 600; }

/* case study hero: the year we partnered, where the Phase chip used to be */
.hchip--year { --acc: var(--mint); }

/* ---------- Studio page: our own brands ---------- */
.own { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); }
.own__card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--card); }
.own__img { aspect-ratio: 16 / 10; overflow: hidden; background: #1b1c1d; }
.own__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.own__card:hover .own__img img { transform: scale(1.03); }
.own__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(22px, 2.4vw, 34px); }
.own__body p { color: var(--ink-64); }
.own__stat { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--ink-12); width: 100%; }
.own__stat b { color: var(--ink); font-family: var(--f-display); font-weight: 500; font-size: 1.75rem; letter-spacing: -.04em; }
.own__stat span { font-size: var(--t-small); color: var(--ink-64); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .wx__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 991px) {
  .studio__grid, .local__grid { grid-template-columns: minmax(0, 1fr); }
  /* QA18 findings 5 and 6: the team cards run the full content width, and the local map follows the heading and text, centred, as the other stacked figures do */
  .wx__panel { grid-template-columns: minmax(0, 1fr); }
  .wx__txt { max-width: 40em; }
  .local__map { max-width: 680px; width: 100%; order: 1; margin-inline: auto; }
  .own { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .wx__tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-radius: 0; background: none; padding-block: 0 6px; gap: 6px; }
  .wx__tabs::-webkit-scrollbar { display: none; }
  .wx__tabs { scroll-padding-inline: var(--gutter); }   /* QA18 finding 11: tabs snap to the 16px gutter, not the screen edge */
  .wx__tab { flex: none; scroll-snap-align: start; background: var(--paper); white-space: nowrap; }
  .wx__panel { padding: 18px 16px 20px; }
  .wx__toast { left: -6px; padding: 9px 14px 9px 9px; gap: 10px; }
  .wx__ti { width: 30px; height: 30px; }
  .hchip__ic { width: 24px; height: 24px; }
  .hchip__ic svg { width: 13px; height: 13px; }
  .hchip__row { gap: 8px; }
  .hchip__row b { font-size: .75rem; }
  .hchip__row small { font-size: .6875rem; }
  .crew { gap: 6px; }
  .crew__m { padding: 6px 6px 12px; }
  .crew__m b { font-size: .875rem; padding-inline: 4px; }
  .crew__m small { font-size: .75rem; padding-inline: 4px; }
  .local__list li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .local__list .frow__i { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__dot::after, .lmap__pulse, .mks__jar i, .mkp__spin, .lmap__run { animation: none; }
  .lmap__pulse, .lmap__run { opacity: 0; }
  .js .local__map .lmap__arcs path, .js .local__map .lmap__chip { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 600px) {
  .lmap__chip text { font-size: 14px; }
  .lmap__key { font-size: .75rem; left: 10px; bottom: 10px; }
}


/* =====================================================================
   Inner pages: contact, the free review, support request, services,
   packages, SEO, support options, process, work, FAQs and legal
   ===================================================================== */
/* page hero */
.phero { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--header-h) + clamp(48px, 6vw, 96px)); padding-bottom: clamp(56px, 6vw, 96px); }
/* the colour wash fades into the section below, so there is never a hard line where the hero ends */
.phero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 11vw, 180px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--phero-next, var(--paper)) 0%, transparent), var(--phero-next, var(--paper)) 92%); }
.phero:has(+ .section--white) { --phero-next: var(--card); }
.phero + .section--flush-top { padding-top: clamp(20px, 2.6vw, 40px); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.phero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.phero__top { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 780px; }
.phero__title { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem); max-width: 12.5em; }
.phero__sub { max-width: 34em; color: var(--ink-80); }
.phero__fig { --mo-max: 560px; width: 100%; }
.phero__facts { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 20px; border-top: 1px solid var(--ink-12); font-size: .9375rem; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--ink-48); }
.crumb li { display: inline-flex; align-items: center; gap: 8px; }
.crumb li + li::before { content: "/"; color: var(--ink-32); }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* forms */
.fcard { position: relative; background: var(--card); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 44px); border: 1px solid var(--ink-12); box-shadow: 0 40px 80px -60px rgba(15, 21, 18, .45); }
.fcard__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 26px; }
.fcard__head .h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -.03em; }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 14px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .field > legend { padding: 0; font-size: .875rem; font-weight: 600; letter-spacing: -.01em; }
.field > legend { margin-bottom: 9px; }
.field__opt { font-weight: 500; color: var(--ink-48); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-12); border-radius: var(--r); padding: 12px 14px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%230f1512' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center / 11px no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-32); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: #fff; border-color: var(--mint-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 45%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-48); }
.field__hint { font-size: .8125rem; color: var(--ink-48); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbox { position: relative; display: inline-flex; }
.chipbox input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chipbox span { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--ink-12); background: var(--paper); font-size: .9375rem; font-weight: 500; line-height: 1.3; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.chipbox span::before { content: ""; width: 15px; height: 15px; flex: none; border-radius: 3px; border: 1.5px solid var(--ink-32); background: #fff; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.chipbox input[type="radio"] + span::before { border-radius: 50%; }
.chipbox:hover span { border-color: var(--ink-32); }
.chipbox input:checked + span { background: var(--mint-wash); border-color: var(--mint-deep); }
.chipbox input:checked + span::before { border-color: var(--mint-deep); background: var(--mint-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.chipbox input:focus-visible + span { outline: 2px solid var(--mint-deep); outline-offset: 2px; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 4px; }
.form__note { font-size: .8125rem; color: var(--ink-64); max-width: 36em; }
.form__note a, .form__ok a, .form__err a { text-decoration: underline; text-underline-offset: 3px; }
.form button.btn { border: 0; cursor: pointer; }
.form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__err { grid-column: 1 / -1; display: none; padding: 12px 14px; border-radius: var(--r); background: var(--coral-wash); color: var(--coral-deep); font-size: .9375rem; }
.form.has-err .form__err { display: block; }
.form__ok { display: none; grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 0; }
.form__ok .icon-tile { background: var(--mint); }
.form__ok .icon-tile svg { color: var(--ink); }
.form.is-sent > :not(.form__ok) { display: none; }
.form.is-sent .form__ok { display: flex; }

/* contact: the form beside the ways to reach us */
.cgrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.cside { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 16px); }
.ccard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 2vw, 28px); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--ink-12); }
.ccard--dark { background: var(--forest); color: var(--paper); border-color: transparent; }
.ccard--mint { background: color-mix(in srgb, var(--mint) 16%, #fff); border-color: color-mix(in srgb, var(--mint-deep) 30%, transparent); }
.ccard__k { font-size: .8125rem; font-weight: 600; color: var(--ink-48); }
.ccard--dark .ccard__k, .ccard--dark .muted { color: var(--paper-64); }
.ccard__v { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); letter-spacing: -.03em; line-height: 1.2; }
.ccard__v a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ccard .link { padding-block: 2px; }
.crows { width: 100%; display: flex; flex-direction: column; }
.crow { display: flex; flex-direction: column; gap: 4px; padding-block: 14px; border-top: 1px solid var(--ink-12); }
.crow:first-child { padding-top: 0; border-top: 0; }
.crow:last-child { padding-bottom: 4px; }
.crow .link { align-self: flex-start; }
.ccard--dark .link { color: var(--mint); }
.ccard__map { width: 100%; margin-top: 6px; border-radius: var(--r); overflow: hidden; box-shadow: none; }
.ccard__map .lmap { display: block; width: 100%; height: 100%; }

/* three numbered steps on a light ground */
/* How it works: each step boxed in, on a rail that fills in step by step as it comes into view */
.nsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); padding-top: 34px; }
.nsteps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nstep { position: relative; display: flex; flex-direction: column; gap: 28px; padding: 24px 24px 28px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--ink-06); box-shadow: 0 1px 2px rgba(15, 21, 18, .04), 0 18px 40px -28px rgba(15, 21, 18, .28); }
.section--white .nstep { background: var(--paper); border-color: var(--ink-06); box-shadow: none; }
.nstep::before { content: ""; position: absolute; left: 0; right: calc(var(--tile-gap) * -1); top: -22px; height: 3px; border-radius: 3px;
  background: linear-gradient(var(--acc-deep), var(--acc-deep)) 0 0 / 0% 100% no-repeat, var(--ink-12); transition: background-size .9s var(--ease-out); transition-delay: calc(var(--d, 0ms) * 3 + 150ms); }
.nstep:last-child::before { right: 0; }
.nstep::after { content: ""; position: absolute; left: 0; top: -28px; width: 15px; height: 15px; border-radius: 50%; background: var(--card); border: 3px solid var(--acc-deep); box-sizing: border-box; transform: scale(.6); opacity: .5; transition: transform .5s var(--ease-out), opacity .5s var(--ease), background-color .5s var(--ease); transition-delay: calc(var(--d, 0ms) * 3); }
.section--white .nstep::after { background: #fff; }
.nstep.is-in::before, html:not(.js) .nstep::before { background-size: 100% 100%; }
.nstep.is-in::after, html:not(.js) .nstep::after { transform: none; opacity: 1; background-color: var(--acc-deep); }
.nstep:nth-child(4n+1) { --acc-deep: var(--coral-deep); }
.nstep:nth-child(4n+2) { --acc-deep: var(--gold-deep); }
.nstep:nth-child(4n+3) { --acc-deep: var(--sky-deep); }
.nstep:nth-child(4n+4) { --acc-deep: var(--mint-deep); }
.nstep__n { font-family: var(--f-display); font-size: 2.5rem; line-height: 1; letter-spacing: -.05em; color: var(--acc-deep); font-variant-numeric: tabular-nums; }
.nstep h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.nstep p { color: var(--ink-64); font-size: var(--t-small); }
.nstep p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* services, one row each */
.svcs { display: flex; flex-direction: column; gap: var(--tile-gap); }
.svc { display: grid; grid-template-columns: 96px minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); padding: clamp(24px, 3vw, 44px); border-radius: var(--r); background: var(--card); scroll-margin-top: 120px; }
.svc__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.svc__n { font-family: var(--f-display); font-size: 1rem; color: var(--ink-48); font-variant-numeric: tabular-nums; }
.svc .icon-tile { background: var(--acc); }
.svc .icon-tile svg { color: var(--ink); }
.svc__body { display: flex; flex-direction: column; gap: 10px; }
.svc__sub { font-weight: 600; color: var(--acc-deep); }
.svc__d { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -.02em; color: var(--ink-80); }
.svc__inc { align-self: start; padding: 20px 22px; border-radius: var(--r); background: var(--acc-wash); }
.svc__k { margin-bottom: 12px; font-size: .8125rem; font-weight: 600; }
.svc__inc .ticks svg { color: var(--acc-deep); }

/* two ways to build on Wix */
.plats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tile-gap); }
.platc { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--card); }
.platc--dark { background: var(--forest); color: var(--paper); }
.platc--dark .muted { color: var(--paper-64); }
.platc--dark .ticks svg { color: var(--mint); }
.platc .ticks li { color: inherit; }
.platc .h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -.03em; }
.platc__foot { margin-top: auto; padding-top: 8px; }
.platc--dark .link { color: var(--mint); }

/* package comparison */
.ctable-wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--ink-12); }
.ctable { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .9375rem; }
.ctable th, .ctable td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--ink-12); }
.ctable thead th { border-top: 0; padding-top: 22px; font-family: var(--f-display); font-weight: 500; font-size: 1.375rem; letter-spacing: -.03em; }
.ctable thead th small { display: block; margin-top: 4px; font-family: var(--f-text); font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--ink-64); }
.ctable tbody th { width: 25%; font-weight: 600; color: var(--ink-80); }
.ctable .is-pop { background: color-mix(in srgb, var(--mint) 12%, #fff); }
.ctable svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; color: var(--mint-deep); }
.ctable .no { color: var(--ink-48); }

/* longer plan cards (SEO, support) */
.plan__result { padding: 14px 16px; border-radius: var(--r); background: var(--paper); font-size: var(--t-small); color: var(--ink-80); }
.plan--pop .plan__result { background: rgba(255, 255, 255, .7); }
.plan__per { font-size: var(--t-small); font-weight: 600; color: var(--ink-64); }
.plan__note { font-size: var(--t-small); color: var(--ink-64); }

/* the FAQ page: groups with a sticky index */
.faqp { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.faqp__nav { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 2px; }
.faqp__nav a { padding: 9px 12px; border-radius: var(--r); font-size: .9375rem; font-weight: 600; color: var(--ink-64); transition: background-color .2s var(--ease), color .2s var(--ease); }
.faqp__nav a:hover { background: var(--ink-06); color: var(--ink); }
.faqp__nav a.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 21, 18, .06); }
.faqg { scroll-margin-top: 110px; }
.faqg + .faqg { margin-top: clamp(48px, 5vw, 72px); }
.faqg__h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.faqg__h::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--acc, var(--mint)); flex: none; }
.faqg .faq__list { margin-top: 12px; }
.faq__item .acc__panel p + p { margin-top: -32px; }
.faq__item .acc__panel a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.faqp__end { margin-top: clamp(48px, 5vw, 72px); }

/* legal pages */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; font-size: .875rem; }
.toc a { padding: 6px 10px; border-radius: var(--r-sm); color: var(--ink-64); line-height: 1.35; }
.toc a:hover { color: var(--ink); background: var(--ink-06); }
.toc a.is-on { color: var(--ink); background: var(--card); font-weight: 600; }
.legal__meta { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 18px 20px; border-radius: var(--r); background: var(--card); font-size: .9375rem; color: var(--ink-80); }
.prose { max-width: 40em; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-80); }   /* about 75 characters a line */
.prose h2 { margin: 2.2em 0 .6em; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); line-height: 1.15; letter-spacing: -.03em; color: var(--ink); scroll-margin-top: 110px; }
.prose h3 { margin: 1.6em 0 .4em; font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.prose p + p, .prose p + ul, .prose ul + p, .prose table + p { margin-top: .8em; }
.prose ul { margin: .6em 0 0; padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { padding: 10px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--ink-12); }
.prose thead th { border-top: 0; color: var(--ink); font-weight: 600; }
.prose .draft { margin: 0 6px 0 0; vertical-align: 2px; }

/* the work, as a grid */
.cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); }
.cases__grid .case { scroll-snap-align: none; }

/* a dark promo band used for the free review */
.promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(24px, 3.4vw, 52px); border-radius: var(--r-lg); background: var(--forest); color: var(--paper); }
.promo .muted { color: var(--paper-64); }
.promo__t { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.promo .h2 .dim { color: var(--paper-dim); }
.promo__fig { --mo-max: 480px; }

@media (max-width: 1180px) {
  .svc { grid-template-columns: 80px minmax(0, 1fr); }
  .svc__inc { grid-column: 2; }
  .nsteps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .phero__grid, .cgrid, .plats, .promo { grid-template-columns: minmax(0, 1fr); }
  .phero__fig { max-width: 560px; }
  .nsteps { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 30px; }
  .nstep::before { left: -22px; right: auto; top: 0; bottom: calc(var(--tile-gap) * -1); width: 3px; height: auto; background-size: 100% 0%; }
  .nstep:last-child::before { bottom: 0; }
  .nstep::after { left: -28px; top: 26px; }
  .faqp, .legal { grid-template-columns: minmax(0, 1fr); }
  .faqp__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .faqp__nav a { background: var(--card); }
  /* QA 18 Oct: on tablets and phones the contents list sits above the text as a card, instead of disappearing */
  .toc { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; padding: 16px 12px 12px; border-radius: var(--r); background: var(--card); }
  .toc::before { content: "Contents"; grid-column: 1 / -1; padding: 0 10px 6px; font-weight: 600; font-size: .9375rem; color: var(--ink); }
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  .svc { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .svc__head { flex-direction: row; align-items: center; }
  .svc__inc { grid-column: auto; }
  .nsteps--4 { grid-template-columns: minmax(0, 1fr); }
  .cases__grid { grid-template-columns: minmax(0, 1fr); }
  .faqp__nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .faqp__nav::-webkit-scrollbar { display: none; }
  .faqp__nav a { flex: none; white-space: nowrap; }
}

/* footer: phone and address under the email, and the legal links */
.footer__nap { display: flex; flex-direction: column; gap: 4px; font-style: normal; font-size: .875rem; color: var(--paper-64); }
.footer__nap a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer__bar p a { color: var(--paper-64); text-decoration: underline; text-underline-offset: 3px; }
.footer__bar p a:hover { color: var(--paper); }
.cta__call { font-size: .9375rem; color: var(--paper-64); }
.cta__call a { color: var(--mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Legal pages: review notes for Ryan, closing details ---------- */
.phero--legal .phero__title { max-width: 14ch; }
.legal__meta p { margin: 0; }
.legal__meta--end { margin-top: 1.4em; }
.prose .legal__note { margin: 1.2em 0; padding: 14px 16px; border: 1px dashed var(--coral-deep); border-radius: var(--r); background: var(--coral-wash); color: var(--ink); font-size: .9375rem; line-height: 1.55; }
.prose .legal__note .draft { display: flex; width: max-content; margin: 0 0 8px; background: var(--paper); }
.prose ul ul { margin-top: .35em; list-style: circle; }
.prose__table { margin: 1em 0; overflow-x: auto; } .prose__table table { margin: 0; }
@media (max-width: 575px) { .prose table { font-size: .875rem; } .prose th, .prose td { padding: 9px 8px; } }

/* Work page: client names under the hero, and the closing tile that fills the last row of the grid.
   With 7 case studies the tile spans two columns on desktop and one on tablet; if the count changes, check the last row. */
.phero__names { margin-top: clamp(32px, 4vw, 56px); }
/* client names on the Work page: a still row, no marquee */
.names--static { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; list-style: none; padding: 0; margin: clamp(22px, 2.6vw, 34px) 0 0; max-width: 1100px; }
.names--static .dup { display: none; }
.names--static .names__item { font-size: clamp(1.0625rem, .92rem + .55vw, 1.375rem); gap: 26px; color: var(--ink-64); }
.names--static .names__item::after { display: none; }   /* QA 18 Oct: dots dangled at the ends of wrapped lines; the gap does the job */
.cases__cta { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; min-height: 280px; padding: clamp(24px, 3vw, 44px); border: 1px dashed rgba(255, 255, 255, .2); border-radius: var(--r); background: rgba(255, 255, 255, .03); }
.cases__cta .h3 { max-width: 18ch; }
.cases__cta .muted { max-width: 42ch; }
@media (max-width: 991px) { .cases__cta { grid-column: span 1; } }
/* FAQs and legal pages: a little air between the hero and the first group */
.phero + .section--flush-top .legal, .phero + .section--flush-top .faqp { padding-top: 0; }

/* Credential badges as links: Legend opens the Wix partner profile, Headless our own page */
.credbs > li { display: contents; }
a.credb, a.navcred, .cred__a { color: inherit; text-decoration: none; }
a.credb { transition: border-color .2s var(--ease), background-color .2s var(--ease); }
a.credb:hover, a.credb:focus-visible { border-color: var(--acc); }
a.navcred:hover .navcred__item b, a.navcred:focus-visible .navcred__item b { text-decoration: underline; text-underline-offset: 3px; }
.cred__a { display: contents; }
.cred__a:hover b, .cred__a:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.credbs__proof { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .8125rem; font-weight: 600; color: inherit; text-decoration: none; }
.credbs__proof:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.credbs__stars { display: inline-flex; gap: 1px; color: var(--gold); }
.credbs__stars svg { width: 12px; height: 12px; }
.footer .credbs__proof { color: var(--paper-80, rgba(244,244,241,.8)); }

/* ---------- case studies (snags, 15 Oct) ---------- */
/* a short dated update under the intro, e.g. Bespoke Foil Company's franchise */
.cupdate { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 34em; padding: 14px 16px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--mint) 18%, #fff); border: 1px solid color-mix(in srgb, var(--mint-deep) 28%, transparent); font-size: .9375rem; line-height: 1.5; color: var(--ink-80, rgba(15, 21, 18, .8)); }
/* the gallery sits closer to the client quote below it, the same gap as under the quote */
.section--gallery { padding-bottom: 0; }
/* QA 18 Oct: the gallery follows "Why it worked" on the same background, so both paddings stacked into a double gap */
.section--flush-top + .section--gallery { padding-top: clamp(20px, 2.6vw, 40px); }
/* device mockups among the photos */
.shot--mock { background: #1b1c1d; }
/* device mockups show the whole device: never cropped at the sides */
.shot--mock { background: linear-gradient(160deg, #22252b, #191b1f); }
.cases__rail .shot--mock img, .shot--mock img { object-fit: contain; object-position: center; }
/* the laptop mockup is never cropped at the sides: it sits whole on a matching ground */
.showcase__img .showcase__mock { object-fit: contain; }
.showcase__img:has(.showcase__mock) { background: linear-gradient(160deg, #22252b, #191b1f); }
/* the live site scrolling slowly from top to bottom in the case study hero */
.hbr__vp--scroll { position: relative; overflow: hidden; background: #fff; container-type: size; }
.hbr__scroll { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: var(--sh); animation: hbr-scroll 38s cubic-bezier(.45, 0, .55, 1) 1.2s infinite alternate; }
.hbr__vp--scroll .hbr__scroll img { position: static; display: block; width: 100%; height: auto; object-fit: initial; clip-path: none; transform: none; }
.hbr:hover .hbr__scroll { animation-play-state: paused; }
@keyframes hbr-scroll { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 100cqh)); } }
@media (prefers-reduced-motion: reduce) { .hbr__scroll { animation: none; } }
.bento__card--tall .bento__img--mock { background: linear-gradient(160deg, #22252b, #191b1f); }
.bento__card--tall .bento__img--mock img { object-fit: contain; }

/* ---------- Home hero: a Wix Headless site loading in a blink (replaces the showreel, 15 Oct) ---------- */
.hbr__tag { margin-left: 8px; padding: 2px 6px; border-radius: 3px; background: var(--mint); color: var(--ink); font-size: .625rem; font-weight: 700; letter-spacing: 0; }
.spd { --cy: 8s; background: #fff; overflow: hidden; }
.spd__page { position: absolute; inset: 0; overflow: hidden; }
.spd__skel { position: absolute; inset: 0; background: #f6f5f0; }
.spd__skel i { position: absolute; display: block; border-radius: 4px; background: linear-gradient(90deg, #ebeae4 0%, #f3f2ec 50%, #ebeae4 100%) 0 0 / 200% 100%; animation: spd-shine 1.2s linear infinite; }
.spd__skel .s-nav { left: 0; right: 0; top: 0; height: 9%; border-radius: 0; background: #e3e2db; }
.spd__skel .s-hero { left: 0; right: 0; top: 9%; height: 46%; border-radius: 0; background: #dcdbd3; }
.spd__skel .s-l1 { left: 5%; top: 30%; width: 46%; height: 6%; background: #cfcec6; }
.spd__skel .s-l2 { left: 5%; top: 38%; width: 34%; height: 6%; background: #cfcec6; }
.spd__skel .s-btn { left: 5%; top: 47%; width: 16%; height: 4.5%; background: #c9c8bf; }
.spd__skel .s-c1, .spd__skel .s-c2, .spd__skel .s-c3 { top: 62%; width: 28%; height: 26%; }
.spd__skel .s-c1 { left: 4%; } .spd__skel .s-c2 { left: 36%; } .spd__skel .s-c3 { left: 68%; }
@keyframes spd-shine { to { background-position: -200% 0; } }
.spd__shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; animation: spd-paint var(--cy) var(--ease) infinite; }
/* the page paints top to bottom in three quick steps, sits, scrolls a little as you browse, then reloads */
@keyframes spd-paint {
  0%, 4% { clip-path: inset(0 0 100% 0); opacity: 1; transform: translateY(0); }
  7% { clip-path: inset(0 0 62% 0); }
  10% { clip-path: inset(0 0 30% 0); }
  13% { clip-path: inset(0 0 0 0); transform: translateY(0); }
  40% { transform: translateY(0); }
  70% { transform: translateY(-26%); }
  86% { opacity: 1; transform: translateY(-26%); clip-path: inset(0 0 0 0); }
  94%, 100% { opacity: 0; transform: translateY(-26%); clip-path: inset(0 0 0 0); }
}
.spd__bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3px; }
.spd__bar i { display: block; height: 100%; background: var(--mint-deep); transform-origin: left; animation: spd-bar var(--cy) linear infinite; }
@keyframes spd-bar { 0% { transform: scaleX(0); opacity: 1; } 12% { transform: scaleX(1); opacity: 1; } 16%, 100% { transform: scaleX(1); opacity: 0; } }
.spd__meter { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; padding: 10px 12px; border-radius: var(--r); background: rgba(15, 21, 18, .86); color: var(--paper); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .75rem; }
.spd__k { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.spd__k svg { width: 13px; height: 13px; color: var(--mint); }
.spd__track { height: 5px; border-radius: 3px; background: rgba(244, 244, 241, .14); overflow: hidden; }
.spd__track i { display: block; height: 100%; border-radius: inherit; background: var(--mint); transform-origin: left; animation: spd-track var(--cy) var(--ease-out) infinite; }
@keyframes spd-track { 0%, 3% { transform: scaleX(0); } 13% { transform: scaleX(1); } 88% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
.spd__steps { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; }
.spd__s { display: inline-flex; align-items: center; gap: 6px; color: var(--paper-48); white-space: nowrap; animation: spd-step var(--cy) linear infinite; }
.spd__s::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.spd__s--2 { animation-name: spd-step2; } .spd__s--3 { animation-name: spd-step3; }
@keyframes spd-step { 0%, 6% { color: var(--paper-48); } 7%, 90% { color: var(--mint); } 94%, 100% { color: var(--paper-48); } }
@keyframes spd-step2 { 0%, 9% { color: var(--paper-48); } 10%, 90% { color: var(--mint); } 94%, 100% { color: var(--paper-48); } }
@keyframes spd-step3 { 0%, 12% { color: var(--paper-48); } 13%, 90% { color: var(--mint); } 94%, 100% { color: var(--paper-48); } }
.spd.is-paused *, .spd.is-paused { animation-play-state: paused !important; }
/* the chips round it */
.cwv { display: flex; gap: 6px; }
.cwv span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 6px; border-radius: var(--r-sm); background: var(--mint-wash); color: var(--ink); font-size: .75rem; font-weight: 700; }
.cwv i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-deep); color: #fff; }
.cwv i svg { width: 9px; height: 9px; }
.cwv__note { font-size: .6875rem; color: var(--ink-64); margin-top: -4px; }
@media (prefers-reduced-motion: reduce) {
  .spd__shot, .spd__bar i, .spd__track i, .spd__s, .spd__skel i { animation: none; }
  .spd__shot { clip-path: none; }
  .spd__bar { display: none; }
  .spd__s { color: var(--mint); }
}
@media (max-width: 520px) {
  .spd__meter { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; font-size: .6875rem; }
  .hbr__tag { display: none; }
}

/* QA18 finding 1 (18 Oct): nothing sits on the Trent screenshot, at any width or at any point in the paint-and-browse loop
   (the page scrolls 26% as you "browse", so any card over the viewport would cover its text at some point).
   The speed chip and the load meter sit on the browser's top edge, the quote and the other chips below it.
   --top is the room above the browser: the taller of the two top cards, less the 6px they overlap the browser bar. */
.hero--studio .hero__stage { --top: 100px; aspect-ratio: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0; container-type: inline-size; }
.hero--studio .hbr { position: relative; inset: auto; align-self: stretch; margin: var(--top) 3% 0 7%; aspect-ratio: 1 / .7564; }
.hero--studio .hchip--brand, .hero--studio .spd__meter { top: calc(var(--top) + 6px); bottom: auto; translate: 0 -100%; }
.hero--studio .hchip--brand { left: 0; }
.hero--studio .spd__meter { left: auto; right: 0; width: min(330px, calc(100% - 236px)); }
/* below the browser: 68.08cqw is the browser's height (90% of the stage wide, at 1 : .7564) */
.hero--studio .hchip--seo, .hero--studio .hchip--copy { bottom: auto; top: calc(var(--top) + 68.08cqw + 14px); }
.hero--studio .hchip--seo { right: 3%; }
.hero--studio .hchip--copy { top: calc(var(--top) + 68.08cqw + 14px + 97px); right: 0; }   /* under the SEO chip (85px tall) */
.hero--studio .hero__quote { position: relative; left: auto; bottom: auto; margin-top: 14px; width: min(400px, calc(100% - 206px)); }
.hero--studio:has(.spd.is-paused) .spd__meter, .hero--studio:has(.spd.is-paused) .spd__meter * { animation-play-state: paused !important; }
@media (max-width: 1180px) {
  .hero--studio .hero__stage { --top: 80px; }
  .hero--studio .hchip--seo { right: 0; }
  .hero--studio .hero__quote { width: min(400px, calc(100% - 182px)); }
  .hero--studio .spd__meter { padding: 8px 10px; font-size: .6875rem; }
  .hero--studio .cwv__note { display: none; }
}
@media (max-width: 767px) {
  /* phones: the meter on top, the quote below; the speed and SEO chips would only fit over the screenshot, so they go */
  .hero--studio .hero__stage { --top: 50px; }
  .hero--studio .hbr { margin: var(--top) 4px 0; aspect-ratio: 4 / 3.2; }
  .hero--studio .spd__meter { right: 4px; width: min(280px, calc(100% - 8px)); }
  .hero--studio .hchip--brand, .hero--studio .hchip--seo { display: none; }
  .hero--studio .hero__quote { width: 100%; }
}
/* About: keep the monitor (with our own site on it) in view when the photo is cropped */
.pair__img.px > img[src*="ryan-desk-web"] { object-position: 8% center; }

/* ==========================================================================
   Blog (15 Oct): the blog page at /blog/ and the post pages at /blog/<slug>.
   Posts use motion figures in place of photos (see motion.css 7 to 9).
   ========================================================================== */
/* category chip, byline and the meta row */
.bcat { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bcat i { width: 9px; height: 9px; border-radius: 2px; background: var(--acc); flex: none; }
.bby { display: inline-flex; align-items: center; gap: 10px; }
.bby img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; background: var(--paper-2); }
.bby b { display: block; font-weight: 600; color: var(--ink); }
.bby small { display: block; font-size: .8125rem; color: var(--ink-48); }

/* post hero */
.phero--post .phero__top { max-width: 860px; }
.post__title { font-size: clamp(2.375rem, 1.45rem + 3vw, 4.25rem); max-width: 14em; text-wrap: balance; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; padding-top: 18px; border-top: 1px solid var(--ink-12); font-size: .9375rem; color: var(--ink-64); }
.post__meta > * { padding: 0 16px; border-left: 1px solid var(--ink-12); }
.post__meta > :first-child { padding-left: 0; border-left: 0; }
.post__meta .bby { font-weight: 600; color: var(--ink); }

/* the post and its side column */
.post { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 1000px) {
  .post { grid-template-columns: 236px minmax(0, 40rem); column-gap: clamp(40px, 5vw, 88px); }
  .post__side { order: -1; }
  .post__stick { position: sticky; top: calc(var(--header-h) + 24px); }
}
.post__side { min-width: 0; }
.post__k { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; color: var(--ink-48); }
.post__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.post__toc a { display: block; padding: 8px 12px; border-radius: var(--r); font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--ink-64); transition: background-color .2s var(--ease), color .2s var(--ease); }
.post__toc a:hover { background: var(--ink-06); color: var(--ink); }
.post__toc a.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 21, 18, .06), inset 2px 0 0 var(--mint-deep); }
@media (max-width: 999px) { .post__toc { display: none; } }
.post__author { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--ink-12); }
.post__author p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-64); }
.post__who { display: flex; align-items: center; gap: 12px; }
.post__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--paper-2); }
.post__who b { font-size: .9375rem; font-weight: 600; color: var(--ink); }
@media (max-width: 999px) { .post__author { max-width: 44rem; } }
.post__share { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.post__share a, .post__share button { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--ink-12); border-radius: var(--r); background: transparent;
  font: 600 .875rem/1 var(--f-text); color: var(--ink-80); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.post__share a:hover, .post__share button:hover { border-color: var(--ink); background: var(--card); }
@media (max-width: 999px) { .post__side { padding-top: 8px; border-top: 1px solid var(--ink-12); } .post__author { margin-top: 24px; } }

/* the writing */
.post__body { max-width: 40rem; }   /* about 72 characters a line */
.post__body > p:first-child { font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); line-height: 1.5; letter-spacing: -.015em; color: var(--ink); }
.post__body h2 { margin: 2.4em 0 .7em; padding-top: 1.1em; border-top: 1px solid var(--ink-12); scroll-margin-top: calc(var(--header-h) + 24px); }
.post__body a { text-decoration-color: var(--mint-deep); text-decoration-thickness: 1.5px; }
.post__body a:hover { text-decoration-color: currentColor; }
.post__body .mo { margin: 2em 0 2.2em; --mo-max: 600px; }
.post__body .mo figcaption { margin-top: 14px; }
.post__body ol.jobs { counter-reset: job; list-style: none; margin: 1.6em 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.post__body ol.jobs li { counter-increment: job; position: relative; padding-left: 46px; }
.post__body ol.jobs li + li { margin-top: 0; }
.post__body ol.jobs li::before { content: counter(job); position: absolute; left: 0; top: .1em; width: 30px; height: 30px; border-radius: var(--r); background: var(--mint); color: var(--ink);
  font: 600 .9375rem/30px var(--f-text); text-align: center; }
.post__body ol.jobs b { color: var(--ink); font-weight: 600; }
.post__body .pull { margin: 2em 0; padding: clamp(20px, 2.6vw, 30px); border-left: 3px solid var(--mint-deep); border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--card); }
.post__body .pull p { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.2; letter-spacing: -.03em; color: var(--ink); text-wrap: pretty; }
.post__body .pull .hl { background: linear-gradient(transparent 62%, rgba(130, 244, 133, .55) 62%, rgba(130, 244, 133, .55) 92%, transparent 92%); }
.post-faq h3 { margin-top: 1.5em; font-size: 1.1875rem; line-height: 1.35; }
.post-faq h3 + p { margin-top: .35em; }
.post__next { margin-top: 2em !important; padding-top: 1.1em; border-top: 1px dashed var(--ink-12); color: var(--ink-64); }
.post__next b { color: var(--ink); }

/* keep reading */
.post-more .head { margin-bottom: clamp(28px, 3.4vw, 48px); }
.post-more__all { margin-top: 20px; }
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tile-gap); }
@media (min-width: 760px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bgrid:not(.bgrid--more) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bmore { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; gap: 8px; padding: 12px 12px 18px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--ink-06); transition: border-color .2s var(--ease); }
.bmore:hover { border-color: var(--ink-32); }
.bmore__img { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: var(--r); overflow: hidden; background: var(--forest); }
.bmore__img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .6s var(--ease-out); }
@media (min-width: 1100px) {
  .bmore { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 22px; padding: 12px 22px 12px 12px; align-items: start; }
  .bmore__img { grid-row: 1 / -1; margin-bottom: 0; }
  .bmore__k { margin-top: 10px; }
  .bmore .bpost__go { align-self: end; margin-bottom: 8px; }
}
.bmore:hover .bmore__img img { transform: scale(1.03); }
.bmore__k { font-size: .8125rem; font-weight: 600; color: var(--ink-48); }
.bmore__t { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h4); line-height: 1.2; letter-spacing: -.03em; color: var(--ink); }
.bpost__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; font-size: .9375rem; color: var(--ink); }
.bpost__arr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--mint); transition: transform .3s var(--ease); }
.bpost__arr svg { width: 11px; height: 11px; }
.bmore:hover .bpost__arr, .bpost:hover .bpost__arr { transform: translateX(3px); }

/* the blog page: post cards, the latest one large */
.blog-sec { padding-top: clamp(8px, 1.4vw, 20px); }
.bpost { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--ink-12); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .3s var(--ease); }
.bpost:hover { border-color: var(--ink-32); box-shadow: 0 24px 48px -32px rgba(15, 21, 18, .35); }
.bpost__fig { padding: clamp(14px, 2vw, 28px); background: color-mix(in srgb, var(--acc-wash, var(--mint-wash)) 70%, var(--paper)); border-bottom: 1px solid var(--ink-06); }
.bpost__fig .mo { --mo-max: 560px; }
.bpost__fig figcaption { display: none; }
.bpost__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(20px, 2.4vw, 32px); }
.bpost__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: .875rem; color: var(--ink-64); }
.bpost__t { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.12; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.bpost__t a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.bpost__t a:focus-visible { outline: none; }
.bpost:has(.bpost__t a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.bpost__x { margin: 0; max-width: 36em; color: var(--ink-64); line-height: 1.55; }
.bpost .bby { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ink-06); width: 100%; font-size: .9375rem; }
.bpost--feat .bpost__t { font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem); }
.bpost--feat .bpost__x { font-size: var(--t-lead); line-height: 1.5; }
@media (min-width: 960px) {
  .bpost--feat { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .bpost--feat .bpost__fig { display: flex; align-items: center; border-bottom: 0; border-right: 1px solid var(--ink-06); }
  .bpost--feat .bpost__body { justify-content: center; padding: clamp(28px, 3.4vw, 56px); }
}
.bpost + .bgrid, .bgrid + .bnext, .bpost + .bnext { margin-top: var(--tile-gap); }
.bnext { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 20px clamp(20px, 2.4vw, 32px); border-radius: var(--r-lg); border: 1px dashed var(--ink-32); }
.bnext__k { font-size: .875rem; font-weight: 600; color: var(--ink-48); }
.bnext__t { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--t-h4); letter-spacing: -.03em; color: var(--ink); }
.bnext__s { margin-left: auto; font-size: .875rem; font-weight: 600; color: var(--ink-48); }
@media (max-width: 599px) {
  .post__meta { gap: 10px 18px; }
  .post__meta > * { padding: 0; border-left: 0; }
}

/* ==========================================================================
   Wix Headless page: "Built in code" section (#detail)
   .dtl is the layout (demo on the left, five points on the right, stacked on
   smaller screens). .ff is the focus frame demo: four mint corner brackets
   glide to the active word and the other words blur. Without the script all
   the words stay sharp and the brackets stay hidden. Reduced motion: no glide,
   no blur, no tour (the script also stops the tour).
   ========================================================================== */
.dtl { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--tile-gap); align-items: stretch; margin-top: clamp(28px, 4vw, 56px); }
.dtl__demo { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dtl__cap { margin: 0; }
.dtl__nw { white-space: nowrap; }
.dtl__pts { list-style: none; margin: 0; padding: 0 clamp(18px, 2vw, 28px); background: var(--card); border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: center; }
.dtl__pts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: clamp(16px, 1.6vw, 22px) 0; }
.dtl__pts li + li { border-top: 1px solid var(--ink-06); }
.dtl__pts h3 { margin: 6px 0 4px; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.dtl__pts p { margin: 0; color: var(--ink-64); }
.dtl__i { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: var(--acc); color: var(--ink); flex: none; }
.dtl__i svg { width: 20px; height: 20px; }
.dtl__self { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: var(--tile-gap); padding: clamp(18px, 2vw, 26px); border-radius: var(--r); background: var(--mint-wash); }
.dtl__self .dtl__i { background: var(--ink); color: var(--mint); }
.dtl__self p { margin: 0; max-width: 62em; }
.dtl__tech { margin: 14px 0 0; max-width: 62em; }
.dtl__tech a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-32); }
.dtl__tech a:hover { text-decoration-color: currentColor; }

.ff { position: relative; flex: 1; display: flex; flex-direction: column; background: var(--forest); color: var(--paper); border-radius: var(--r-lg); overflow: hidden; }
.ff__bar { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: .8125rem; font-weight: 500; color: var(--paper-64); border-bottom: 1px solid rgba(244, 244, 241, .08); }
.ff__live { color: var(--mint); }
.ff__stage { flex: 1; display: grid; place-items: center; min-height: clamp(260px, 28vw, 400px); padding: clamp(40px, 5vw, 72px) clamp(18px, 4vw, 56px);
  background-image: linear-gradient(rgba(244, 244, 241, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 244, 241, .045) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center; }
.ff__line { position: relative; margin: 0; text-align: center; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.125rem, 1.35rem + 3.1vw, 4.25rem); line-height: 1.18; letter-spacing: -.04em; }
.ff__w { display: inline-block; margin: 0; padding: 0 .06em; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ff.is-live .ff__w { filter: blur(3px); opacity: .38; transition: filter .55s var(--ease-out), opacity .55s var(--ease-out); }
.ff.is-live .ff__w.is-on { filter: none; opacity: 1; }
.ff.is-live .ff__w:focus-visible { outline: none; }
.ff__frame { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; pointer-events: none; }
.ff.is-live .ff__frame { display: block; }
.ff.is-ready .ff__frame { transition: transform .6s var(--ease-out), width .6s var(--ease-out), height .6s var(--ease-out); }
.ff__frame i { position: absolute; width: clamp(10px, 1.3vw, 16px); height: clamp(10px, 1.3vw, 16px); border: 0 solid var(--mint); }
.ff__frame i:nth-child(1) { left: 0; top: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 2px; }
.ff__frame i:nth-child(2) { right: 0; top: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 2px; }
.ff__frame i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 2px; }
.ff__frame i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ff.is-live .ff__w { filter: none; transition: none; }
  .ff.is-ready .ff__frame { transition: none; }
}
.dtl__touch { display: none; }
@media (hover: none) {
  .dtl__fine { display: none; }
  .dtl__touch { display: inline; }
}
@media (max-width: 1179px) {
  .dtl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .dtl__pts li, .dtl__self { gap: 14px; }
  .dtl__self { align-items: start; }
}

/* ---------- Page not found (404.html) ---------- */
.nf__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.nf__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--tile-gap); }
.nf__grid a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: clamp(18px, 1.8vw, 24px); border-radius: var(--r); background: var(--card); transition: background-color .25s var(--ease); }
.nf__grid a:hover, .nf__grid a:focus-visible { background: var(--acc-wash); }
.nf__i { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: var(--acc); color: var(--ink); margin-bottom: 14px; }
.nf__i svg { width: 20px; height: 20px; }
.nf__grid b { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.015em; }
.nf__grid small { color: var(--ink-64); font-size: .9375rem; line-height: 1.4; }
@media (max-width: 1179px) { .nf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .nf__grid { grid-template-columns: minmax(0, 1fr); } .nf__i { margin-bottom: 6px; } }

/* QA 18 Oct: on phones the comparison table hid Professional and Scale off to the side.
   Each feature now stacks with the three packages underneath it. */
@media (max-width: 767px) {
  .ctable { min-width: 0; }
  .ctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ctable tr { display: block; border-top: 1px solid var(--ink-12); padding: 14px 0 10px; }
  .ctable tbody tr:first-child { border-top: 0; }
  .ctable tbody th { display: block; width: auto; padding: 0 16px 6px; border: 0; }
  .ctable td { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; padding: 5px 16px; border: 0; }
  .ctable td::before { content: attr(data-label); font-weight: 600; font-size: .8125rem; color: var(--ink-64); padding-top: 2px; }
  .ctable .is-pop { background: none; }
  .ctable td.is-pop::before { color: var(--mint-deep); }
}

/* ---------- Cookie choice (only on the page when content/site.json has a ga4_id) ---------- */
.consent { position: fixed; z-index: 60; left: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-radius: var(--r-lg); background: var(--card); color: var(--ink); border: 1px solid var(--ink-12); box-shadow: 0 30px 60px -30px rgba(15, 21, 18, .45); font-size: .9375rem; line-height: 1.5; }
.consent[hidden] { display: none; }
.consent b { display: block; font-weight: 600; margin-bottom: 2px; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.consent__btns { display: flex; gap: 8px; }
.consent__btn { flex: 1; height: 44px; border-radius: var(--r); border: 1px solid var(--ink); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.consent__btn--yes { background: var(--ink); color: var(--paper); }
.consent__btn:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }

@media (max-width: 599px) { .toc { grid-template-columns: minmax(0, 1fr); } }
/* QA 18 Oct: option chips on phones run the full width, so they stack evenly */
@media (max-width: 767px) { .chips { flex-direction: column; } .chipbox, .chipbox span { width: 100%; } }

/* QA 18 Oct: the side menus' link padding pushed their text in from the page edge; pull them back so the text lines up */
@media (min-width: 992px) { .faqp__nav { margin-left: -12px; } .toc { margin-left: -10px; } }