/* Expertise, company, contact and privacy pages. */
.red { color: var(--red); }

.page-head { padding: 200px 24px 80px; text-align: center; }
.page-head__lead { max-width: 930px; margin: 90px auto 0; }
.narrow { max-width: 930px; margin: 0 auto; padding: 80px 24px; }
.prose > * + * { margin-top: 1.4em; }
.manifesto { max-width: 783px; padding-top: 0; }
.manifesto strong { font-weight: 700; } /* Kurrent has no bold, so the browser emboldens it, as on the live site */

/* Expertise: service groups */
.svc { max-width: 948px; margin: 0 auto; padding: 80px 24px 0; scroll-margin-top: 40px; }
.svc:last-of-type { padding-bottom: 160px; }
.svc h2 { margin-bottom: 16px; }
.svc__item { border-top: 1px solid rgba(255, 255, 255, 0.25); }
.svc__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.svc__item summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 66px; padding: 20px 6px 20px 0; cursor: pointer; list-style: none; color: #bababa; font-family: var(--font-display); font-size: 20px; line-height: 1.2; letter-spacing: 0; transition: color 0.25s ease-in-out; }
.svc__item summary:hover, .svc__item[open] summary { color: #fff; }
.svc__item summary::-webkit-details-marker { display: none; }
.svc__icon { position: relative; flex: none; width: 16px; height: 16px; }
.svc__icon::before, .svc__icon::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: currentColor; transition: transform 0.3s var(--ease); }
.svc__icon::after { transform: rotate(90deg); }
.svc__item[open] .svc__icon::after { transform: rotate(0); }
.svc__item p { padding: 0 48px 24px 0; color: #c9c9c9; }

/* Company */
.about { max-width: 1440px; margin: 0 auto; padding: 80px 120px; }
.about__media { position: relative; aspect-ratio: 1200 / 786; overflow: hidden; background: #0d0606; }
.about__media iframe, .about__media .lottie { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.about__placeholder { position: absolute; inset: 0; }
.about__text { display: grid; grid-template-columns: var(--hw, 330px) 1fr; gap: 36px; margin-top: 40px; }
.about__text .t-lead + .t-lead { margin-top: 24px; }
.about-note { max-width: 783px; padding-top: 200px; }
.about-note > * + * { margin-top: 39px; }
@media (min-width: 810px) and (max-width: 1399.98px) { .about-note { padding-top: 250px; padding-bottom: 100px; } }
@media (max-width: 809.98px) { .narrow.about-note { padding-top: 95px; padding-bottom: 0; } .about-note + .clients { padding-top: 48px; } }
/* Company text columns follow the live site's widths: 930 on very wide screens, 735 from 1400, 600 on tablet (plus 24px padding each side) */
@media (min-width: 1800px) { .manifesto, .about-note { max-width: 978px; } }
@media (min-width: 810px) and (max-width: 1399.98px) { .manifesto, .about-note { max-width: 648px; } }
.clients { max-width: 1440px; margin: 0 auto; padding: 80px 229px 200px; }
.clients__grid { display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 104px; list-style: none; margin: 94px 0 0; padding: 0; }
@media (min-width: 1100px) { .clients__grid { margin-inline: -44px; } }
/* Tablet: three logos per row, as on the live site */
@media (min-width: 810px) and (max-width: 1399.98px) { .clients__grid { grid-template-columns: repeat(3, 1fr); margin-inline: 0; } }
.clients__grid li { display: flex; align-items: center; justify-content: center; height: 100px; }
/* Each logo has its own box, sized as on the live site (width/height attributes), and is fitted inside it */
.clients__grid img { max-width: 100%; object-fit: contain; opacity: 0.6; mix-blend-mode: lighten; }
.clients__note { margin-top: 90px; color: #636363; text-align: center; }

/* Contact */
.theme-contact { --page-bg: var(--footer); --page-fg: #fff; }
.contact { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 124px 24px; }
/* Wide screens: the logo and nav sit clear of the box, so it can centre with only a small margin */
@media (min-width: 1400px) { .contact { padding: 40px 24px; } }
.contact__scene { position: absolute; inset: 0; }
.contact__scene iframe { width: 100%; height: 100%; border: 0; }
.contact__panel { position: relative; display: grid; grid-template-columns: 402px 402px; column-gap: 32px; row-gap: 40px; width: 960px; max-width: 100%; padding: 62px 62px 62px; background: linear-gradient(180deg, #ff0013 0%, #ff0013 60%, #ff3333 100%); color: #000; }
.contact__title { grid-column: 1 / -1; font-size: 52px; line-height: 1; color: #fff; }
.contact__form label { display: block; margin-bottom: 20px; }
.contact__form label span { display: block; margin-bottom: 8px; font-weight: 700; font-size: 17px; line-height: 25.5px; letter-spacing: -0.34px; }
.contact__form input, .contact__form textarea { display: block; width: 100%; padding: 10px 11px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0; background: rgba(200, 20, 40, 0.55); color: #fff; font: 300 14px/1.4 var(--font-body); }
.contact__form textarea { height: 150px; resize: vertical; }
.contact__form ::placeholder { color: rgba(255, 255, 255, 0.7); }
.contact__form input:focus, .contact__form textarea:focus { outline: 2px solid #fff; outline-offset: 0; }
.contact__form button { width: 100%; height: 40px; border: 0; background: #fff; color: #000; font: 700 16px/1 var(--font-body); text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; }
.contact__form button:hover { background: #000; color: #fff; }
.contact__status:empty { display: none; }
.contact__status { margin-top: 10px; font-weight: 400; font-size: 14px; }
.contact__address { margin: 40px 0 14px; font-weight: 700; font-size: 17px; line-height: 25.5px; letter-spacing: -0.34px; }
.contact__mail { text-decoration: underline; text-underline-offset: 3px; }
.contact__buttons { display: flex; gap: 16px; margin-top: 40px; }
.contact__buttons .btn { min-width: 193px; height: 40px; }
.contact__buttons .btn:hover { background: #000; color: #fff; border-color: #000; }

/* Privacy */
.privacy { max-width: 610px; margin: 0 auto; padding: 280px 24px 180px; }
.privacy h1 { margin-bottom: 24px; }
.privacy p + p { margin-top: 20px; }
.privacy__h { margin: 40px 0 18px; font: 700 17px/25.5px var(--font-body); letter-spacing: -0.34px; }
.privacy a { text-decoration: underline; }

/* Tablet (810–1399px), as on the live site: a narrower panel with a fixed 224px text column and stacked buttons */
@media (min-width: 810px) and (max-width: 1399.98px) {
  .contact { padding: 124px 60px; }
  .contact__panel { grid-template-columns: minmax(0, 1fr) 224px; row-gap: 36px; width: 760px; padding: 42px; }
  .contact__title { font-size: 33px; line-height: 33px; }
  .contact__form label span { margin-bottom: 10px; }
  .contact__form input, .contact__form textarea { padding: 12px; }
  .contact__form input { height: 40px; }
  .contact__info .t-body { font-size: 14px; line-height: 18.2px; }
  .contact__address { margin: 38px 0 12px; }
  .contact__mail { display: inline-block; margin-top: 4px; font-size: 16px; line-height: 20.8px; }
  .contact__buttons { flex-direction: column; margin-top: 36px; }
  .contact__buttons .btn { width: 224px; min-width: 0; }
}
@media (max-width: 1099.98px) {
  .about { padding: 60px 24px 30px; }
  .about__text { grid-template-columns: 1fr; gap: 16px; }
  .clients { padding: 60px 24px 120px; }
}
/* Tablet (810–1399px), as on the live site: 80px side margins, a 240px heading column beside the text */
@media (min-width: 810px) and (max-width: 1399.98px) {
  .about { max-width: 1360px; padding: 122px 80px 0; }
  .about__text { grid-template-columns: 240px minmax(0, 1fr); gap: 30px; }
  .about__text .t-h4 { font-size: 24px; }
  .about__text .t-lead { font-size: 16px; }
  .clients { max-width: 1142px; padding-inline: 80px; }
  .page-head { padding-inline: 80px; }
  .page-head__lead { max-width: 596px; }
}
@media (max-width: 809.98px) {
  .page-head { padding: 140px 24px 40px; }
  .page-head__lead { margin-top: 40px; }
  .narrow { padding: 40px 24px; }
  .svc { padding: 60px 24px 0; }
  .svc h2 { margin-bottom: 12px; }
  .clients__grid { grid-template-columns: repeat(2, 1fr); row-gap: 90px; margin-top: 60px; }
  .contact { padding: 124px 24px; }
  .contact__panel { grid-template-columns: 1fr; padding: 32px 20px; }
  .contact__title { font-size: 36px; }
  .contact__buttons { flex-direction: column; }
  .privacy { padding: 140px 24px 100px; }
}