/* ==========================================================================
   KurlyBrackets - inner pages
   Loaded after studio.css on every page except the home page, so these
   pages share the home page's tokens, type, buttons, header and footer and
   only add their own components here.
   --------------------------------------------------------------------------
   1.  Page tokens & base
   2.  Page heroes (page, case study, article)
   3.  Shared furniture: eyebrow, section heads, buttons, links, icons
   4.  Cards, grids and lists
   5.  About
   6.  Services
   7.  Work & case studies
   8.  Contact form
   9.  Blog & articles
   10. Prose & legal pages
   11. Reveal on scroll
   12. Responsive
   ========================================================================== */

/* ----------------------------------------------------------------
   1. Page tokens & base
   ---------------------------------------------------------------- */
:root {
  --muted:     #62625e;              /* 5.1:1 on paper, 4.6:1 on paper-alt */
  --line:      rgba(48, 49, 48, .16);
  --line-strong: rgba(48, 49, 48, .32);
  --card:      #f7f6f3;
  --violet-on-dark: #b26bff;        /* violet text on the dark heroes: 5:1+ */
  --mast-h:    70px;                 /* header height once it is stuck */
}

main { background: var(--paper); color: var(--body); }
main p { margin: 0 0 1rem; }
main p:last-child { margin-bottom: 0; }
main a { color: var(--violet-lo); transition: color .2s var(--ease); }
main a:hover { color: var(--red-ink); }
main strong { color: var(--charcoal); font-weight: 600; }

main h2 { font-size: clamp(2rem, 3.4vw, 3rem); color: var(--charcoal); }
main h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.12; color: var(--charcoal); }

.container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 40px;
}

/* Decorative blobs belonged to the previous design */
.blob { display: none; }

.text-purple,
.text-blue { color: var(--violet-lo); }

.page-body { padding-block: 88px 112px; }

/* ----------------------------------------------------------------
   2. Page heroes
   Every inner page opens on a dark band of sheared game art, the same
   language as the home page hero. build.py fills in the panels.
   ---------------------------------------------------------------- */
.page-hero,
.case-hero,
.article__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-deep);
  color: rgba(255, 255, 255, .84);
}
.page-hero .panels,
.case-hero .panels,
.article__hero .panels { z-index: 0; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(5, 7, 11, .95) 0%, rgba(5, 7, 11, .88) 34%, rgba(5, 7, 11, .66) 60%, rgba(5, 7, 11, .52) 100%),
    linear-gradient(180deg, rgba(5, 7, 11, .78) 0%, rgba(5, 7, 11, 0) 30%, rgba(5, 7, 11, 0) 62%, rgba(5, 7, 11, .86) 100%);
}
.page-hero > .container,
.case-hero > .container,
.article__hero > .container { position: relative; z-index: 2; }

.page-hero {
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  padding: 150px 0 80px;
}
.page-hero h1,
.case-hero h1,
.article__hero h1 { color: #fff; }
.page-hero h1 {
  max-width: 15em;
  margin-bottom: 22px;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
}
.page-hero p { max-width: 640px; font-size: 18px; line-height: 1.6; }
.page-hero .eyebrow,
.case-hero .eyebrow,
.article__hero .eyebrow { color: rgba(255, 255, 255, .72); }
.page-hero .text-purple, .page-hero .text-blue,
.case-hero .text-purple, .case-hero .text-blue,
.article__hero .text-purple, .article__hero .text-blue { color: var(--violet-on-dark); }
.page-hero a:not(.btn),
.case-hero p a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* the 404 page is only a hero: let it fill the screen above the footer */
.page-404 main { display: flex; flex-direction: column; background: var(--ink-deep); }
.page-404 .page-hero { flex: 1 0 auto; }

.crumbs {
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none !important; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { margin-inline: 10px; opacity: .55; }
.crumbs [aria-current] { color: #fff; }

/* Thank-you tick */
.success-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 28px;
  border: 2px solid var(--violet-on-dark);
  color: #fff;
}

/* ----------------------------------------------------------------
   3. Shared furniture
   ---------------------------------------------------------------- */
.eyebrow {
  display: block;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--red-ink);
}

.section-head { max-width: 760px; margin: 0 0 56px; }
.section-head h2 { margin-bottom: 18px; }
.section-head p { font-size: 17px; max-width: 64ch; }
.section--inner { margin-top: 120px; }

/* Buttons: the home page shapes, with the older modifier names mapped on */
.btn { line-height: 1.2; text-align: center; }
.btn--primary { background: var(--violet); color: #fff; }
.btn--primary:hover { background: var(--violet-lo); color: #fff; }
.btn--ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: rgba(48, 49, 48, .45);
}
.btn--ghost:hover { border-color: var(--charcoal); background: rgba(48, 49, 48, .06); color: var(--charcoal); }
.btn--outline-dark:hover { color: var(--charcoal); }
.page-hero .btn--ghost,
.case-hero .btn--ghost,
.inline-cta .btn--ghost,
.side-card--cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.page-hero .btn--ghost:hover,
.case-hero .btn--ghost:hover,
.inline-cta .btn--ghost:hover,
.side-card--cta .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .09); color: #fff; }
.btn--sm { padding: 13px 22px; font-size: 13px; }
.btn--lg { padding: 18px 34px; font-size: 15px; }
.btn--block { width: 100%; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.arrow-link svg { flex: none; width: 17px; height: 17px; transition: transform .22s var(--ease); }
.arrow-link:hover { color: var(--charcoal); }
.arrow-link:hover svg { transform: translateX(5px); }
.arrow-link--blue,
.arrow-link--amber { color: var(--red-ink); }
.case-hero .arrow-link { color: #fff; }
.case-hero .arrow-link:hover { color: var(--violet-on-dark); }

/* Square icon frame. Colour variants from the old design all read alike. */
.icon-tile {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border: 1px solid var(--line-strong);
  color: var(--red-ink);
}
.icon-tile svg { width: 28px; height: 28px; }
.icon-tile--sm { width: 44px; height: 44px; }
.icon-tile--sm svg { width: 22px; height: 22px; }
.icon-tile--lg { width: 72px; height: 72px; }
.icon-tile--lg svg { width: 36px; height: 36px; }

/* Tag chips on the dark case study hero */
.work-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill svg { width: 15px; height: 15px; color: var(--violet-on-dark); flex: none; }

.store-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.store-badges a { display: block; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.store-badges a:hover { transform: translateY(-2px); opacity: .88; }
.store-badges img { height: 42px; width: auto; }

/* Dark call-to-action block at the foot of most pages */
.inline-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 104px;
  padding: 52px 56px;
  background: var(--ink);
  color: rgba(255, 255, 255, .78);
  overflow: hidden;
}
.inline-cta::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--violet);
}
.inline-cta h2 { color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin-bottom: 14px; }
.inline-cta p { max-width: 62ch; }
.inline-cta a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.inline-cta .btn { flex: none; }
.inline-cta :focus-visible { outline-color: #fff; }

/* ----------------------------------------------------------------
   4. Cards, grids and lists
   ---------------------------------------------------------------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); }

.why-card .icon-tile { margin-bottom: 24px; }
.why-card h3 { margin-bottom: 12px; font-size: 1.32rem; }
.why-card p { font-size: 15.5px; line-height: 1.62; }

.tick-list { margin: 0 0 28px; display: grid; gap: 11px; }
.tick-list li,
.prose ul li {
  position: relative;
  padding-left: 22px;
  line-height: 1.55;
}
.tick-list li { font-size: 16px; color: var(--body); }
.tick-list li::before,
.prose ul li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--red-ink);
}

/* Label / value grids */
.fact-grid,
.service-facts {
  display: grid;
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 32px; }
.fact-grid > div,
.service-facts > div { padding: 22px 24px; background: var(--card); }
.fact-grid dt,
.service-facts dt {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.fact-grid dd,
.service-facts dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--charcoal); }
/* a short last row stretches its cells, so no empty grey cell is left over */
.fact-grid > div:last-child:nth-child(3n + 2) { grid-column: span 2; }
.fact-grid > div:last-child:nth-child(3n + 1) { grid-column: span 3; }
.service-facts > div:last-child:nth-child(4n + 3) { grid-column: span 2; }
.service-facts > div:last-child:nth-child(4n + 2) { grid-column: span 3; }
.service-facts > div:last-child:nth-child(4n + 1) { grid-column: span 4; }

/* ----------------------------------------------------------------
   5. About
   ---------------------------------------------------------------- */
.split-block {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 72px;
  align-items: center;
}
.split-block .prose { margin: 0; }

/* Founder portrait, cut to the same -9 degree shear as the home page panels */
.portrait { margin: 0; }
.portrait__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
  clip-path: polygon(19.8% 0, 100% 0, 80.2% 100%, 0 100%);
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.portrait figcaption strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 500; letter-spacing: .12em; color: var(--charcoal); }

/* Five-step process */
.process__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.process-step { position: relative; text-align: center; }
.process-step::after {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(50% + 48px);
  width: calc(100% - 96px + 18px);
  height: 1px;
  background: var(--line-strong);
}
.process-step:last-child::after { display: none; }
.process-step__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--red-ink);
}
.process-step__icon svg { width: 32px; height: 32px; }
.process-step__num {
  position: absolute;
  right: -10px;
  top: -10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}
.process-step h3 { margin-bottom: 12px; font-size: 1.3rem; }
.process-step p { font-size: 15px; }
.process-step__time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px !important;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 12px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.process-step__time svg { width: 14px; height: 14px; color: var(--red-ink); }
.process-step__out { margin-top: 14px !important; font-size: 13.5px !important; color: var(--muted); }

/* ----------------------------------------------------------------
   6. Services
   ---------------------------------------------------------------- */
.anchor-nav {
  position: sticky;
  top: var(--mast-h);
  z-index: 50;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.anchor-nav ul {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 10px;
}
.anchor-nav ul::-webkit-scrollbar { display: none; }
.anchor-nav a {
  display: block;
  padding: 10px 14px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .76);
}
.anchor-nav a:hover { color: #fff; }
.anchor-nav a.is-active { background: var(--violet); color: #fff; }
.anchor-nav :focus-visible { outline-color: #fff; outline-offset: -3px; }

.page-body--services { padding-top: 64px; }
.service-block {
  padding: 52px;
  margin-bottom: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  scroll-margin-top: 64px;
}
.service-block__head { display: flex; align-items: flex-start; gap: 28px; margin-bottom: 34px; }
.service-block__head h2 { margin-bottom: 14px; font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
.service-block__lede { font-size: 17px; max-width: 68ch; }
.service-block__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 34px;
}
.service-block__grid h3 {
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--red-ink);
}
.service-block .tick-list { margin-bottom: 0; }

/* ----------------------------------------------------------------
   7. Work & case studies
   Portfolio rows share the home page's .project base (studio.css).
   ---------------------------------------------------------------- */
.project { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 64px; }
.page-body .project:first-child { padding-top: 0; }
.project--flip .project__media { order: 2; }
.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
}
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.project:hover .project__media img { transform: scale(1.04); }
.project__genre {
  margin-bottom: 14px !important;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.project__body h2 { margin-bottom: 18px; font-size: clamp(2rem, 3.2vw, 2.8rem); color: var(--red); }
.project__body > p { margin-bottom: 24px; max-width: 58ch; }
.project__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 26px;
  background: var(--line);
  border: 1px solid var(--line);
}
.project__metrics li { padding: 14px 10px; background: var(--card); text-align: center; }
.project__metrics strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--charcoal);
}
.project__metrics span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Case study hero */
.case-hero { padding: 150px 0 84px; }
.case-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.case-hero h1 { margin-bottom: 20px; font-size: clamp(2.7rem, 5vw, 4.4rem); }
.case-hero__lede { font-size: 18px; margin-bottom: 26px !important; max-width: 56ch; color: rgba(255, 255, 255, .86); }
.case-hero__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.case-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.case-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 56ch;
  margin-bottom: 24px !important;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .06);
  border-left: 3px solid var(--violet-on-dark);
  font-size: 15px;
  color: rgba(255, 255, 255, .86);
}
.case-note svg { width: 19px; height: 19px; color: var(--violet-on-dark); flex: none; margin-top: 2px; }
.case-note strong { color: #fff; }

.case-metrics {
  background: var(--ink);
  color: #fff;
  padding-block: 38px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.case-metrics ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  text-align: center;
}
.case-metrics strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}
.case-metrics span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.case-metrics :focus-visible { outline-color: #fff; }

.case-layout,
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 64px;
  align-items: start;
}
.case-main { max-width: none; }
.case-side,
.contact-side {
  position: sticky;
  top: calc(var(--mast-h) + 24px);
  display: grid;
  gap: 20px;
}
.contact-side > * { min-width: 0; }

.side-card {
  padding: 30px;
  background: var(--card);
  border: 1px solid var(--line);
}
.side-card h2 { margin-bottom: 18px; font-size: 1.3rem; line-height: 1.12; }
.side-card p { font-size: 15px; }
.side-card .btn + .btn { margin-top: 10px; }
.side-card .btn { padding-inline: 16px; white-space: normal; }
.side-card--cta { background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, .8); }
.side-card--cta h2 { color: #fff; }
.side-card--cta p { margin-bottom: 20px; }
.side-card--cta :focus-visible { outline-color: #fff; }
.side-card--assure { background: transparent; }

.spec-list { margin: 0; display: grid; }
.spec-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.spec-list > div:last-child { border-bottom: 0; }
.spec-list dt { flex: none; font-size: 14px; color: var(--muted); }
.spec-list dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--charcoal); text-align: right; }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li {
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.assure-list { display: grid; gap: 14px; }
.assure-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--charcoal); }
.assure-list svg { width: 20px; height: 20px; color: var(--violet-lo); flex: none; }

.case-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 80px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.case-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--charcoal) !important;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.case-nav__link:hover { border-color: var(--charcoal); transform: translateY(-2px); }
.case-nav__link svg { flex: none; color: var(--red-ink); }
.case-nav__link span {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.case-nav__link small {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-nav__link--next { margin-left: auto; text-align: right; }

/* ----------------------------------------------------------------
   8. Contact form
   ---------------------------------------------------------------- */
.field { margin-bottom: 22px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.field label,
.field legend {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.req { color: var(--red-ink); }
.field__hint { margin-bottom: 14px !important; font-size: 14px; color: var(--muted); }

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #8a8a85;
  border-radius: 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: 16px;               /* 16px stops iOS zooming on focus */
  color: var(--charcoal);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a04d6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
  padding-right: 44px;
}
.field input:not([type=checkbox]):not([type=radio]):focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(145, 5, 254, .2);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }

.field__error { margin: 7px 0 0 !important; font-size: 13.5px; font-weight: 600; color: #b42318; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #b42318; }

.field--budget { padding: 24px; border: 1px solid var(--line); background: var(--card); }
.field--budget legend { padding: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.field .choice { margin: 0; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: block;
  padding: 13px 10px;
  border: 1px solid #8a8a85;
  background: #fff;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.choice:hover span { border-color: var(--violet); color: var(--violet-lo); }
.choice input:checked + span { background: var(--violet); border-color: var(--violet); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }

.field--checks { display: grid; gap: 14px; }
/* checkbox labels are sentences, not field labels */
.field .check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--body);
  cursor: pointer;
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--violet); cursor: pointer; }
.check a { text-decoration: underline; text-underline-offset: 2px; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.form__note { margin-top: 14px; font-size: 13.5px; color: var(--muted); text-align: center; }
.form__status { margin-top: 16px; font-size: 15px; font-weight: 600; text-align: center; }
.form__status.is-ok    { color: #1a7a43; }
.form__status.is-error { color: #b42318; }

.next-steps { display: grid; gap: 20px; }
.next-steps li { display: flex; gap: 16px; }
.next-steps__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}
.next-steps strong { display: block; margin-bottom: 4px; font-size: 15.5px; }
.next-steps p { font-size: 14px; }

/* ----------------------------------------------------------------
   9. Blog & articles
   ---------------------------------------------------------------- */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px !important;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.post__tag {
  padding: 5px 10px;
  background: var(--charcoal);
  color: #fff;
  font-size: 12px;
  letter-spacing: .16em;
}
.post__tag--blue,
.post__tag--amber { background: var(--charcoal); color: #fff; }
.article__hero .post__meta { color: rgba(255, 255, 255, .72); }
.article__hero .post__tag { background: var(--violet); }

.post-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
  padding: 34px;
  background: var(--card);
  border: 1px solid var(--line);
}
.post-feature__media,
.post-card__media { display: block; overflow: hidden; background: var(--ink); }
.post-feature__media { aspect-ratio: 16 / 10; }
.post-feature__media img,
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-feature:hover .post-feature__media img,
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-feature h2 { margin-bottom: 18px; font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.post-feature h2 a,
.post-card h2 a { color: var(--charcoal); }
.post-feature h2 a:hover,
.post-card h2 a:hover { color: var(--red-ink); }
.post-feature p { margin-bottom: 24px; }

.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.post-card { padding: 0; overflow: hidden; }
.post-card__media { aspect-ratio: 16 / 9; }
.post-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 30px 32px 32px; }
.post-card h2 { font-size: 1.55rem; line-height: 1.1; margin-bottom: 14px; }
.post-card p { font-size: 15.5px; margin-bottom: 22px; }
.post-card .arrow-link { margin-top: auto; align-self: flex-start; }

.article__hero { padding: 150px 0 72px; }
.article__hero > .container { max-width: 1020px; }
.article__hero h1 { margin-bottom: 22px; font-size: clamp(2.4rem, 4.6vw, 4rem); }
.article__standfirst { font-size: 19px; color: rgba(255, 255, 255, .86); max-width: 66ch; }

.article__body {
  max-width: 760px;
  margin-inline: auto;
  padding-block: 72px 24px;
  font-size: 17px;
}
.article__body h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 52px 0 18px; }
.article__body h3 { font-size: 1.35rem; margin: 34px 0 12px; }
.article__body > p:first-child { font-size: 19px; color: var(--charcoal); }
.article__body blockquote {
  margin: 32px 0;
  padding: 22px 28px;
  border-left: 3px solid var(--violet);
  background: var(--card);
}
.article__body blockquote p { margin: 0; font-size: 17px; color: var(--charcoal); }
.article__body ol { display: grid; gap: 12px; counter-reset: steps; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.article__body ol li { position: relative; padding-left: 38px; counter-increment: steps; }
.article__body ol li::before {
  content: counter(steps);
  position: absolute;
  left: 0; top: .05em;
  display: grid;
  place-items: center;
  width: 25px; height: 25px;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--line); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.table-wrap th,
.table-wrap td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.table-wrap th {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--paper-alt);
}
.table-wrap tr:last-child td { border-bottom: 0; }

.article__foot { max-width: 860px; margin-inline: auto; padding-bottom: 24px; }
.author-box {
  display: flex;
  gap: 18px;
  padding: 26px 28px;
  background: var(--card);
  border: 1px solid var(--line);
}
.author-box strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.author-box p { font-size: 15px; margin: 0; }
.avatar { display: block; width: 88px; height: 88px; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 48px; height: 48px; }
.article__foot .inline-cta { margin-top: 40px; }
.article__foot .case-nav { margin-top: 48px; }

.notice {
  display: flex;
  gap: 16px;
  padding: 22px 26px;
  margin-bottom: 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red-ink);
}
.notice strong { display: block; margin-bottom: 4px; }
.notice p { font-size: 15.5px; margin: 0; }

/* ----------------------------------------------------------------
   10. Prose & legal pages
   ---------------------------------------------------------------- */
.prose { max-width: 780px; margin-inline: auto; }
.prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 52px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.35rem; margin: 34px 0 12px; }
.prose p { margin-bottom: 1.1rem; }
.prose ul { margin: 0 0 1.4rem; display: grid; gap: 10px; }
/* links inside running text need more than colour to stand out (WCAG 1.4.1) */
.prose a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ----------------------------------------------------------------
   11. Reveal on scroll
   Content is only hidden when JS is running (the 'js' class is set in
   <head>), so it never stays invisible if main.js fails to load.
   ---------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------
   12. Responsive
   ---------------------------------------------------------------- */
@media (max-width: 1180px) {
  .case-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 44px; }
  .contact-layout { gap: 44px; }
  .service-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-facts > div:last-child:nth-child(n) { grid-column: auto; }
  .service-facts > div:last-child:nth-child(odd) { grid-column: span 2; }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .container { padding-inline: 28px; }
}

@media (max-width: 1024px) {
  .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
  .process-step::after { display: none; }

  .case-metrics ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
  .case-layout,
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .case-side,
  .contact-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .project,
  .post-feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .project--flip .project__media { order: 0; }

  .case-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split-block { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .portrait { max-width: 420px; }

  .inline-cta { flex-direction: column; align-items: flex-start; gap: 26px; padding: 40px; }
  .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-grid > div:last-child:nth-child(n) { grid-column: auto; }
  .fact-grid > div:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 860px) {
  .page-hero { min-height: 440px; padding: 128px 0 60px; }
  .case-hero,
  .article__hero { padding: 128px 0 60px; }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(5, 7, 11, .9) 0%, rgba(5, 7, 11, .78) 45%, rgba(5, 7, 11, .92) 100%);
  }
  .page-body { padding-block: 64px 80px; }
  .section--inner { margin-top: 88px; }
  .section-head { margin-bottom: 40px; }
  .inline-cta { margin-top: 80px; }
}

@media (max-width: 780px) {
  .cards-3,
  .cards-4 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .card { padding: 28px 24px; }
  .process__steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .case-metrics ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-side,
  .contact-side { grid-template-columns: minmax(0, 1fr); }
  .project__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .field-row { grid-template-columns: minmax(0, 1fr); }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--budget { padding: 20px; }

  .service-block { padding: 30px 24px; }
  .service-block__head { flex-direction: column; gap: 18px; }
  .service-block__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .service-facts,
  .fact-grid { grid-template-columns: minmax(0, 1fr); }
  .service-facts > div:last-child:nth-child(n),
  .fact-grid > div:last-child:nth-child(n) { grid-column: auto; }

  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-feature { padding: 22px; }
  .post-card__body { padding: 26px 24px 28px; }
  .article__body { padding-block: 48px 16px; }

  .case-nav { flex-direction: column; }
  .case-nav__link--next { margin-left: 0; text-align: left; flex-direction: row-reverse; justify-content: flex-end; }
  .inline-cta { padding: 34px 26px; }
}

@media (max-width: 560px) {
  .container { padding-inline: 20px; }
  .page-hero__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .case-metrics ul { grid-template-columns: minmax(0, 1fr); }
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .store-badges img { height: 38px; }
}

@media print {
  .page-hero, .case-hero, .article__hero { min-height: 0; padding: 32px 0; }
  .card, .service-block, .project, .post-card { break-inside: avoid; page-break-inside: avoid; }
}