/*
 * Proof site styles, hand-written: the header and footer of every page, and the components of the pages.
 * Base typography (Poppins, 16px/1.5, #252525) comes from base.css. Breakpoints follow the old layout: 576 / 768 / 992 / 1200 / 1400px.
 */

/* Layout */
.wrap { width: 100%; margin: 0 auto; padding: 0 15px; }
@media (min-width: 576px) { .wrap { max-width: 540px; } }
@media (min-width: 768px) { .wrap { max-width: 720px; } }
@media (min-width: 992px) { .wrap { max-width: 960px; } }
@media (min-width: 1200px) { .wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .wrap { max-width: 1200px; } }

.section { position: relative; }
.section h2, .section h3 { margin-top: 0; color: #252525; }
:where(.section) ul { margin: 0; padding: 0; list-style: none; }

@media (max-width: 575.98px) { .wide-only { display: none; } }

.actions { margin: 0; text-align: center; }

/* Header */
.site-header { position: relative; z-index: 99; background: #101585; box-shadow: 0 0 4px rgba(0, 0, 0, .1); animation: fade-in .5s; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.site-header__logo img { display: block; width: auto; height: 36px; }
.site-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: block; padding: 0 0 0 30px; color: #fff; font-size: 18px; font-weight: 500; line-height: 60px; text-decoration: none; transition: color .4s; }
.site-nav a:hover, .site-nav a:focus-visible { color: #ffdd44; }
.menu-button { display: none; width: 25px; padding: 0; border: 0; background: none; }
.menu-button span { display: block; height: 2px; margin: 5px 0; background: #fff; }
@media (max-width: 991.98px) {
  .site-nav { display: none; }
  .menu-button { display: block; }
}
@media (max-width: 575.98px) { .site-header__bar { height: 50px; } }
@keyframes fade-in { from { opacity: 0; } }

/* Mobile menu: the whole screen, opening as a circle from the menu button; the lights of the quote section move
   behind it, and the items come up one after the other. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 2; isolation: isolate; display: flex; flex-direction: column; padding: 0 15px calc(24px + env(safe-area-inset-bottom));
  overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; color: #fff; background: linear-gradient(165deg, #101585, #26199a 55%, #0b0f5c);
  clip-path: circle(0 at calc(100% - 28px) 30px); visibility: hidden;
  transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s .55s;
}
.mobile-menu::-webkit-scrollbar { display: none; }
/* Fixed: moving lights must not add to the scrollable height */
.mobile-menu::before, .mobile-menu::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.mobile-menu::before { top: 10%; left: -30%; width: 340px; height: 340px; background: rgba(251, 21, 242, .28); animation: quote-light-pink 14s ease-in-out infinite; }
.mobile-menu::after { right: -30%; bottom: 8%; width: 320px; height: 320px; background: rgba(251, 175, 21, .22); animation: quote-light-orange 18s ease-in-out infinite; }
.menu-open { overflow: hidden; }
/* Visible at once when opening (so the close button can take the focus), hidden after the circle closes. */
.menu-open .mobile-menu { clip-path: circle(150vmax at calc(100% - 28px) 30px); visibility: visible; transition-delay: 0s; }
.mobile-menu__top { display: flex; flex: none; align-items: center; justify-content: space-between; height: 60px; }
.mobile-menu__close { position: relative; width: 25px; height: 25px; padding: 0; border: 0; background: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1); transform: rotate(-90deg); }
.menu-open .mobile-menu__close { transform: none; }
.mobile-menu__close span { position: absolute; top: 12px; left: 0; width: 25px; height: 2px; background: #fff; transform: rotate(45deg); }
.mobile-menu__close span + span { transform: rotate(-45deg); }
.mobile-menu__nav, .mobile-menu__foot { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 9px; }
.mobile-menu__nav { padding-top: 16px; }
.mobile-menu__link { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 16px 0; border: 0; background: none; color: #fff; text-align: left; font-size: clamp(26px, 8.4vw, 44px); font-weight: 700; line-height: 1.1; text-decoration: none; }
.mobile-menu__link span { color: #ffdd44; font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.mobile-menu__link + .mobile-menu__link, .mobile-menu__group + .mobile-menu__link { border-top: 1px solid rgba(255, 255, 255, .16); }
.mobile-menu__link:hover, .mobile-menu__link:focus-visible { color: #ffdd44; }
/* Services: a plus that turns into a minus, and the list opening under the row */
.mobile-menu__link .mobile-menu__plus { position: relative; align-self: center; width: 18px; height: 18px; margin-left: auto; flex: none; }
.mobile-menu__plus::before, .mobile-menu__plus::after { content: ""; position: absolute; top: 8px; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .3s; }
.mobile-menu__plus::after { transform: rotate(90deg); }
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__plus::after { transform: none; }
.mobile-menu__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility 0s .35s; }
.mobile-menu__panel.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.mobile-menu__panel ul { min-height: 0; margin: 0; padding: 0 0 0 34px; overflow: hidden; list-style: none; }
.mobile-menu__panel li:last-child { padding-bottom: 14px; }
.mobile-menu__panel a { display: block; padding: 9px 0; color: #fff; font-size: 18px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: color .2s; }
.mobile-menu__panel a:hover, .mobile-menu__panel a:focus-visible { color: #ffdd44; }
.mobile-menu__panel .mobile-menu__all { color: #ffdd44; font-size: 16px; }
.mobile-menu__panel .mobile-menu__all::after { content: " \2192"; }
.mobile-menu__foot { display: flex; flex-direction: column; gap: 18px; margin-top: auto; padding-top: 32px; }
.mobile-menu__foot .button { width: 100%; font-size: 20px; }
.mobile-menu__contact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: 0; }
.mobile-menu__contact a { color: #fff; font-weight: 600; text-decoration: none; }
.mobile-menu__social { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.mobile-menu__social img { display: block; width: 26px; height: 26px; }
.mobile-menu__reveal { opacity: 0; transform: translateY(26px); transition: opacity .2s, transform .2s; }
.menu-open .mobile-menu__reveal {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1) calc(.2s + var(--i) * .06s), transform .5s cubic-bezier(.2, .7, .2, 1) calc(.2s + var(--i) * .06s);
}
@media (min-width: 992px) { .mobile-menu { display: none; } }
@media (max-width: 575.98px) { .mobile-menu__top { height: 50px; } .mobile-menu { clip-path: circle(0 at calc(100% - 28px) 25px); } .menu-open .mobile-menu { clip-path: circle(150vmax at calc(100% - 28px) 25px); } }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: visibility 0s; }
  .mobile-menu::before, .mobile-menu::after { animation: none; }
  .mobile-menu__close, .mobile-menu__reveal, .menu-open .mobile-menu__reveal { transition: none; }
}

/* Footer */
.site-footer { background: #101585; color: #fff; font-size: 14px; line-height: 1.5; }
.site-footer__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; align-items: start;
  padding: 30px 15px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.site-footer__grid > * { grid-column: span 2; }
.site-footer__grid > :first-child, .site-footer__grid > :last-child { grid-column: span 4; }
.site-footer p, .site-footer ul { margin: 0 0 16px; padding: 0; list-style: none; }
.site-footer a { color: #fff; text-decoration: none; transition: color .4s; }
.site-footer a:hover, .site-footer a:focus-visible { color: #ffdd44; }
.site-footer .site-footer__social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin: 0; }
.site-footer__social img { display: block; width: 30px; height: 30px; }
@media (max-width: 767.98px) { .site-footer__grid { display: block; } }

/* Cookie notice: over the page, not blocking it; above the mobile bar */
.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; z-index: 90; display: flex; align-items: center; gap: 20px;
  width: 500px; max-width: calc(100% - 32px); padding: 20px 22px; border-radius: 12px;
  background: #fff; color: #252525; font-size: 15px; line-height: 1.45; box-shadow: 0 10px 36px rgba(16, 21, 133, .28);
  animation: cookie-rise .5s cubic-bezier(.2, .9, .3, 1.2);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__body { flex: 1; min-width: 0; }
.shield-art { flex: none; width: 96px; height: 96px; overflow: visible; }
.shield-art__body { transform-box: fill-box; transform-origin: center; animation: shield-float 5s ease-in-out infinite; }
.shield-art__ring {
  fill: none; stroke: #fb15f2; stroke-width: 2; opacity: 0;
  transform-box: fill-box; transform-origin: center; animation: shield-ring 5s ease-out infinite;
}
.shield-art__ring--2 { stroke: #fbaf15; animation-delay: .5s; }
.shield-art__glare { fill: #fff; opacity: .4; transform: skewX(-20deg); animation: shield-glare 5s ease-in-out infinite; }
.shield-art__check {
  fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: shield-check 5s ease-out infinite;
}
@keyframes cookie-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes shield-float { 50% { transform: translateY(-4px); } }
@keyframes shield-ring {
  0% { opacity: .7; transform: scale(.9); }
  45%, 100% { opacity: 0; transform: scale(1.3); }
}
@keyframes shield-glare {
  0%, 22% { transform: translateX(0) skewX(-20deg); }
  48%, 100% { transform: translateX(160px) skewX(-20deg); }
}
@keyframes shield-check {
  0%, 4% { stroke-dashoffset: 1; }
  20%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@media (max-width: 575.98px) {
  .cookie-banner { gap: 14px; padding: 16px; font-size: 14px; }
  .shield-art { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner, .shield-art__body, .shield-art__ring, .shield-art__glare, .shield-art__check { animation: none; }
  .shield-art__check { stroke-dashoffset: 0; }
}
.cookie-banner p { margin: 0 0 12px; }
.cookie-banner a { color: #101585; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; }
.cookie-banner .button { flex: 1; padding: 6px 12px 8px; border-color: #101585; }
.cookie-banner .cookie-banner__hide { background: #fff; color: #101585; }
.cookie-banner .cookie-banner__hide:hover, .cookie-banner .cookie-banner__hide:focus-visible { background: #e9eaf8; color: #101585; }

/* Privacy notice */
.legal { padding: 60px 0 80px; }
.legal .wrap { max-width: 800px; }
.legal h1 { margin-bottom: 40px; text-align: center; }
.legal h2 { margin: 36px 0 12px; font-size: 22px; font-weight: 700; }
.legal li { margin-bottom: 6px; }
.legal a { text-decoration: underline; }
.legal__updated { margin: 40px 0 0; color: #5c5c5c; font-size: 14px; }

/* Thank-you page after the quote form */
.thanks { min-height: 440px; padding: 120px 0; text-align: center; }
.thanks h1 { margin-bottom: 30px; }

/* Buttons */
.button {
  display: inline-block; padding: 10px 15px; border: 1px solid transparent; border-radius: .7em;
  font-size: 24px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none;
  cursor: pointer; transition: all .15s ease-in-out;
}
.button--yellow { background: #ffdd44; color: #252525; }
.button--yellow:hover, .button--yellow:focus-visible { background: #7d7d7d; color: #fff; }
.button--gradient {
  border: 0; line-height: 1.5; color: #fff;
  background: linear-gradient(225deg, #fbaf15, #fb15f2, #101585) 0 0 / 200% auto;
  animation: gradient-move 3s ease infinite;
}
.button--gradient:hover, .button--gradient:focus-visible { color: #fff; }
.button--primary {
  padding: 8px 22px 10px; border-radius: 4px; background: #101585; color: #fff;
  font-size: 16px; font-weight: 400;
}
.button--primary:hover, .button--primary:focus-visible { color: #ffdd44; }
@keyframes gradient-move {
  0%, 100% { background-position: 0% 92%; }
  50% { background-position: 100% 9%; }
}

/* Wave dividers at the edge of a section */
.wave { position: absolute; left: 0; z-index: 2; display: block; width: 100%; height: auto; fill: #fff; pointer-events: none; }
.wave--bottom { bottom: -1px; transform: scaleY(-1); }
.wave--top { top: -1px; fill: #f7f7f7; }

/* Hero: the showreel fills the first screen and ends on the site's angle; the navy runs on below it with the client
   logos. Together they are exactly as tall as the screen under the header (60px, 50px on phones), so the page below
   starts at the bottom edge. The angle is a tenth of the width tall, the room under the text grows
   with it. The video is pinned near its top, so a crop takes three times as much from the bottom. The text sits bottom
   left, on a veil that darkens that corner. */
.hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: calc(100svh - 60px); overflow: hidden;
  background: #101585; color: #fff;
}
/* The pink glow of the service page heroes, drifting slowly in the navy under the angle, not over the video */
.hero::after {
  content: ""; position: absolute; z-index: 1; right: -10%; bottom: -130px; width: 60%; height: 380px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(251, 21, 242, .24), transparent); pointer-events: none;
  animation: hero-glow 22s ease-in-out infinite alternate;
}
.hero__stage {
  position: relative; isolation: isolate; display: flex; flex: 1; flex-direction: column; justify-content: flex-end;
  min-height: 560px; padding: 60px 0 max(150px, calc(10vw + 10px)); overflow: hidden;
}
/* A mouse with its wheel rolling down, in the middle above the angle (the angle is about 6vw tall there); it links to
   the services. Not on phones and touch screens, where the text runs to the bottom and there is no mouse. */
.hero__scroll {
  position: absolute; left: 50%; bottom: calc(6vw + 36px); z-index: 3; width: 26px; height: 42px; margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, .75); border-radius: 14px; transition: border-color .3s;
}
.hero__scroll::before {
  content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
  background: #fff; animation: hero-wheel 1.8s ease-in-out infinite;
}
.hero__scroll:hover, .hero__scroll:focus-visible { border-color: #ffdd44; }
@keyframes hero-wheel { 0% { opacity: 0; transform: none; } 25% { opacity: 1; } 70% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } }
@media (hover: none) { .hero__scroll { display: none; } }
.hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.hero__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 14, 88, .8), rgba(10, 14, 88, .4) 45%, rgba(10, 14, 88, 0) 75%),
    linear-gradient(0deg, rgba(10, 14, 88, .55), rgba(10, 14, 88, 0) 45%);
}
.hero .wave { fill: #101585; }
.hero__body > * { max-width: 760px; }
.hero h1 { max-width: 1000px; margin: 0 0 8px; color: #fff; font-size: 68px; line-height: 1.04; }
.hero__lead { font-size: 20px; opacity: .9; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }
.hero .hero-logos { position: relative; z-index: 3; display: flex; align-items: center; gap: 30px; margin-top: -40px; padding-bottom: 34px; }
.hero .hero-logos h2 { flex: 0 0 auto; margin: 0; text-align: left; }
.hero .hero-logos .logos { flex: 1; min-width: 0; }
.button--ghost { border: 1px solid rgba(255, 255, 255, .7); background: rgba(16, 21, 133, .35); color: #fff; line-height: 1.5; }
.button--ghost:hover, .button--ghost:focus-visible { background: #fff; color: #101585; }
/* Phones: the veil darkens the bottom, where the text is; one button and a link; the logos under their title */
@media (max-width: 575.98px) {
  .hero { min-height: calc(100svh - 50px); }
  .hero__stage { min-height: 460px; padding: 60px 0; }
  .hero__scroll { display: none; }
  .hero__stage::before { background: linear-gradient(0deg, rgba(10, 14, 88, .85) 10%, rgba(10, 14, 88, .2) 70%); }
  .hero h1 { font-size: 34px; line-height: 1.1; }
  .hero__lead { font-size: 16px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 10px; margin: 22px 0 0; }
  .hero__actions .button { font-size: 18px; }
  .hero .button--ghost { padding: 2px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .7); border-radius: 0; background: none; font-size: 15px; font-weight: 500; }
  .hero::after { right: -30%; bottom: -100px; width: 110%; height: 280px; }
  .hero .hero-logos { flex-direction: column; align-items: stretch; gap: 6px; margin-top: -4px; padding-bottom: 30px; }
  .hero .hero-logos h2 { text-align: center; }
}

/* Why Proof: four facts on light cards, then the crew on navy, drawn as people: one camera operator for a smaller
   shoot, a whole crew for a bigger production. site.js adds is-in when it scrolls into view: a yellow line grows
   under each number and the people step in one by one. */
.why { padding-bottom: 80px; }
.why__title, .faq__title { margin-bottom: 40px; font-size: 40px; font-weight: 700; }
.why__intro { max-width: 760px; margin: -24px 0 32px; font-size: 18px; }
.why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.why__card { padding: 28px 24px; border-radius: 14px; background: #f3f4fb; transition: transform .3s ease, box-shadow .3s ease; }
.why__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 21, 133, .12); }
.why__card .why__value { position: relative; margin: 0 0 18px; padding-bottom: 12px; color: #101585; font-size: 52px; font-weight: 700; line-height: 1.1; }
.why__value::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 4px; border-radius: 2px; background: #ffdd44; transition: width .8s ease; }
.why.will-show .why__value::after { width: 0; }
.why.is-in .why__value::after { width: 48px; }
.why__card:nth-child(2) .why__value::after { transition-delay: .15s; }
.why__card:nth-child(3) .why__value::after { transition-delay: .3s; }
.why__card:nth-child(4) .why__value::after { transition-delay: .45s; }
.why__card .why__label { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.why__card .why__text { margin: 0; font-size: 15px; overflow-wrap: break-word; }
.why__crew {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center;
  margin-top: 40px; padding: 34px 36px; border-radius: 14px; background: #101585; color: #fff;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
/* A slow light behind the crew card, like on the other navy blocks */
.why__crew::before {
  content: ""; position: absolute; z-index: -1; top: -60%; left: -10%; width: 55%; height: 220%; border-radius: 50%;
  background: rgba(251, 21, 242, .22); filter: blur(60px); pointer-events: none; animation: crew-light 16s ease-in-out infinite;
}
.why__crew.will-show { opacity: 0; transform: translateY(28px); }
.why__crew.is-in { opacity: 1; transform: none; }
.why__crew.will-show h3, .why__crew.will-show p { opacity: 0; transform: translateY(10px); transition: opacity .6s ease .25s, transform .6s ease .25s; }
.why__crew.is-in h3, .why__crew.is-in p { opacity: 1; transform: none; }
@keyframes crew-light { 50% { transform: translate(120%, 10%) scale(1.15); } }
.why__crew h3 { margin: 0 0 10px; color: #fff; font-size: 22px; }
.why__crew p { margin: 0; color: rgba(255, 255, 255, .8); }
.why__scale { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.why__team { margin: 0; text-align: center; }
.why__team--big figcaption { max-width: 190px; }
.why__team figcaption { color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.4; }
.why__team strong { display: block; color: #fff; font-size: 15px; }
.why__people { display: flex; justify-content: center; gap: 4px; height: 52px; margin-bottom: 10px; color: #ffdd44; }
.why__people svg { --d: 0s; width: 34px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* The figures draw themselves one after the other: the single camera operator, the arrow, then the crew; after that
   they breathe, each a little later than the one before. */
.why__people svg * { stroke-dasharray: 1; transition: stroke-dashoffset .7s ease calc(.35s + var(--d)); }
.why__crew.will-show .why__people svg * { stroke-dashoffset: 1; }
.why__crew.is-in .why__people svg * { stroke-dashoffset: 0; }
.why__crew.is-in .why__people svg { animation: crew-breathe 3.4s ease-in-out calc(2.2s + var(--d)) infinite; }
.why__team--big svg:nth-child(1) { --d: .65s; }
.why__team--big svg:nth-child(2) { --d: .8s; }
.why__team--big svg:nth-child(3) { --d: .95s; }
.why__team--big svg:nth-child(4) { --d: 1.1s; }
@keyframes crew-breathe { 50% { transform: translateY(-3px); } }
.why__arrow { position: relative; width: 46px; height: 2px; margin-bottom: 40px; background: linear-gradient(90deg, rgba(255, 221, 68, 0), #ffdd44); transform-origin: left; transition: transform .6s ease .75s; }
.why__crew.will-show .why__arrow { transform: scaleX(0); }
.why__crew.is-in .why__arrow { transform: none; }
.why__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-right: 0; border-left-color: #ffdd44; }
@media (prefers-reduced-motion: reduce) {
  .why__card, .why__value::after, .why__people svg *, .why__arrow { transition: none; }
  .why__crew::before, .why__crew.is-in .why__people svg { animation: none; }
}
@media (max-width: 1199.98px) { .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px) {
  .why__crew { grid-template-columns: 1fr; gap: 26px; }
  .why__scale { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .why { padding-bottom: 40px; }
  .why__title, .faq__title { margin-bottom: 24px; font-size: 30px; }
  .why__intro { margin: -12px 0 24px; font-size: 16px; }
  .why__grid { gap: 12px; }
  .why__card { padding: 20px 16px; }
  .why__card .why__value { font-size: 38px; }
  .why__card .why__label { font-size: 16px; }
  .why__card .why__text { font-size: 14px; }
  .why__crew { padding: 26px 20px; }
  .why__scale { gap: 12px; }
  .why__people svg { width: 26px; height: 36px; }
}

/* Client logos: an endless strip (site.js appends a copy of the list for the loop) */
.logos { position: relative; height: 100px; overflow: hidden; background: #fff; }
.logos::before, .logos::after {
  content: ""; position: absolute; top: 0; z-index: 2; width: 200px; height: 100px;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.logos::before { left: 0; }
.logos::after { right: 0; transform: rotate(180deg); }
.logos .logos__track { display: flex; width: 3500px; margin: 0; padding: 0; list-style: none; }
.logos__track li { flex: 0 0 calc(3500px / 32); }
.logos__track img { display: block; width: 100%; height: auto; }
.logos--loop .logos__track { animation: logos-scroll 40s linear infinite; }
@keyframes logos-scroll { to { transform: translateX(-50%); } }
@media (max-width: 575.98px) {
  .logos { height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .logos--loop .logos__track { animation: none; } }

/* Case studies */
.cases { padding: calc(10vw + 40px) 0 75px; }
.cases__more { margin: -40px 0 30px; text-align: center; }
.cases__more a { color: #0345bf; }
.cases__title { margin-bottom: 30px; font-size: 48px; font-weight: 700; line-height: 1.2; }
.case h3 { margin-bottom: 8px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.case .case__meta { font-weight: 700; }
.case--featured { margin: 36px 0 50px; }
.case--featured .video-thumb { max-width: 1000px; margin: 0 auto 20px; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 50px; margin-bottom: 75px; }
.case-grid .video-thumb { margin: 20px 0; }
@media (max-width: 767.98px) { .case-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
  .cases__title { font-size: 30px; }
  .case-grid { row-gap: 30px; }
}

/* Video thumbnail that loads the YouTube player on click (site.js) */
.video-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  overflow: hidden; background: #000; cursor: pointer;
}
.video-thumb img, .video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 4px; }
.video-thumb img { object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.video-thumb::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") calc(50% + 2.5px) 50% / 40px no-repeat;
  backdrop-filter: blur(8px); transform: translate(-50%, -50%); transition: all .3s ease;
}
.video-thumb--small::after { width: 50px; height: 50px; background-size: 24px; }
.video-thumb:hover img { transform: scale(1.02); filter: brightness(.8); }
.video-thumb:hover::after {
  background-color: #fff; transform: translate(-50%, -50%) scale(1.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.video-thumb--small:hover::after { transform: translate(-50%, -50%) scale(1.15); }
.video-thumb.is-playing::after { display: none; }

/* Services */
.services { padding: 100px 0 0; background: #f7f7f7; }
.services__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; align-items: center; }
.services__intro h2 { margin-bottom: 30px; font-size: 48px; font-weight: 700; line-height: 62px; text-align: center; }
.services__intro .services__lead { margin-bottom: 0; font-size: 20px; font-weight: 700; line-height: 30px; }
.service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px 30px; margin: 85px 0 100px; }
.service {
  position: relative; isolation: isolate; display: grid; grid-template-columns: calc((100% + 30px) / 6 - 30px) 1fr;
  grid-template-rows: auto auto 1fr; column-gap: 30px; align-content: start;
}
.service h3 { margin-bottom: 8px; font-size: 20px; font-weight: 700; line-height: 1.2; }
/* The whole card is the link to the service page; a link in the text stays clickable above it. */
.service h3 a { color: inherit; text-decoration: none; }
.service h3 a::after { content: ""; position: absolute; inset: -10px; }
.service:hover h3 a, .service h3 a:focus-visible { color: #0345bf; }
.service p a { position: relative; z-index: 1; color: #0345bf; }
.service__more { margin-top: 10px; color: #0345bf; font-size: 15px; font-weight: 600; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
.service:hover .service__more, .service:focus-within .service__more { opacity: 1; transform: none; }
@media (hover: none) { .service__more { opacity: 1; transform: none; } }
/* Line icons in navy, a yellow dot behind their top left corner that slides under the icon on hover. site.js traces
   the lines of the icons one after another as they scroll into view (will-draw on the list, is-in on the item; the
   dash is longer than any line), and each then plays its hover move once (is-play): the clapper snaps, a sparkle
   turns, the sound waves open, the box lifts, the phone buzzes, the second person waves. */
.service__icon { position: relative; grid-row: span 3; width: 56px; height: 56px; color: #101585; }
.service__icon::before {
  content: ""; position: absolute; left: -8px; top: -6px; z-index: -1; width: 34px; height: 34px; border-radius: 50%;
  background: #ffdd44; transition: transform .4s ease;
}
.service:hover .service__icon::before, .service.is-play .service__icon::before { transform: translate(22px, 18px) scale(1.25); }
.service__icon svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.service__icon g { transform-box: fill-box; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .35s; }
.will-draw .service__icon :is(path, rect, circle) { stroke-dasharray: 160; stroke-dashoffset: 160; }
.will-draw .service.is-in :is(path, rect, circle) { animation: icon-trace 1.2s ease forwards; }
@keyframes icon-trace { to { stroke-dashoffset: 0; } }
.service:hover .icon-clap, .service.is-play .icon-clap { transform: rotate(-14deg); transform-origin: left bottom; }
.icon-spark { opacity: 0; }
.service:hover .icon-spark, .service.is-play .icon-spark { opacity: 1; transform: rotate(90deg) scale(1.2); transform-origin: center; }
.icon-waves { opacity: .25; }
.service:hover .icon-waves, .service.is-play .icon-waves { opacity: 1; transform: scale(1.12); transform-origin: center; }
.service:hover .icon-box, .service.is-play .icon-box { transform: translateY(-4px); }
.service:hover .icon-phone, .service.is-play .icon-phone { animation: icon-buzz .4s ease 2; transform-origin: center; }
@keyframes icon-buzz { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.service:hover .icon-wave, .service.is-play .icon-wave { transform: translateX(3px) rotate(6deg); transform-origin: left bottom; }
@media (prefers-reduced-motion: reduce) {
  .service__icon::before, .service__icon g, .service__more { transition: none; }
  .service:hover .icon-phone, .service.is-play .icon-phone { animation: none; }
}
.services__more { margin: -40px 0 50px; text-align: center; }
.services__more a { color: #0345bf; }
@media (max-width: 767.98px) {
  .services__intro, .service-list, .service { grid-template-columns: 1fr; }
  .service__icon { grid-row: auto; }
}
@media (max-width: 575.98px) {
  .services { padding: 60px 0 40px; }
  .services__intro { row-gap: 46px; }
  .services__intro h2 { font-size: 30px; line-height: 35px; }
  .service { justify-items: center; text-align: center; }
  .service__icon { margin-bottom: 20px; }
  .service-list { row-gap: 50px; margin-bottom: 70px; }
}

/* FAQ */
.faq { padding: 0 0 90px; }
.faq .svc-faq { max-width: none; }
.faq a { color: #0345bf; }

/* Error from POST /ajanlatkeres (site.js) */
.quote-form__status { padding: 10px 14px; border-left: 4px solid #d93025; background: #fdecea; color: #8a1c14; font-size: 15px; line-height: 1.4; }
/* The thanks in place of the sent form (site.js) */
.quote-form__done { margin: auto 0; padding: 8px 0; outline: 0; color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 1.55; }
.quote-form__done::before {
  content: "\2713"; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 20px;
  border-radius: 50%; background: #ffdd44; color: #101585; font-size: 26px; font-weight: 700;
}
.quote-form__done p { margin: 0; }
.quote-form__done .quote-form__done-title { margin-bottom: 10px; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.3; }
.svc-form--light .quote-form__done { color: #252525; }
.svc-form--light .quote-form__done::before { background: #101585; color: #fff; }
.svc-form--light .quote-form__done .quote-form__done-title { color: #101585; }
/* Honeypot: off-screen, so people never fill it in */
.quote-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* Blog: post page (templates/pages/post.php) and listing (templates/pages/blog.php) */
.post-head { padding: 50px 0 40px; background: #f3f4fa; }
.post-head__inner { max-width: 820px; }
.post-head h1 { margin: 0 0 15px; color: #101585; font-size: 40px; font-weight: 700; line-height: 1.15; }
.post-head__lead { margin: 0; font-size: 18px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0 8px; margin-bottom: 20px; font-size: 14px; }
.breadcrumb span { color: #7d7d7d; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; color: #5c5c5c; font-size: 15px; }
.post-meta__avatar { width: 32px; height: 32px; border-radius: 50%; }
@media (max-width: 767.98px) {
  .post-head { padding: 30px 0; }
  .post-head h1 { font-size: 28px; }
}

.post-hero { width: 100%; max-width: 820px; height: auto; margin: 40px auto 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.post-body { max-width: 820px; margin: 0 auto; padding: 40px 0 80px; font-size: 18px; line-height: 1.7; }
.post-body h2 { margin: 50px 0 15px; color: #101585; font-size: 30px; font-weight: 700; line-height: 1.2; }
.post-body h3 { margin: 30px 0 10px; font-size: 21px; font-weight: 700; line-height: 1.3; }
.post-body h2, .post-body h3 { scroll-margin-top: 20px; }
/* FAQ (the "Gyakori kérdések" section, src/Markdown.php): the answer right under its question */
.post-body #gyakori-kerdesek ~ h3 { margin-bottom: 2px; }
.post-body p, .post-body ul, .post-body ol, .post-body .table-scroll { margin: 0 0 20px; }
.post-body ul, .post-body ol { padding-left: 24px; }
.post-body li + li { margin-top: 6px; }
.post-body a { text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover, .post-body a:focus-visible { color: #0345bf; }
@media (max-width: 767.98px) {
  .post-body { padding-bottom: 60px; font-size: 17px; }
  .post-body h2 { margin-top: 40px; font-size: 25px; }
}

.table-scroll { overflow-x: auto; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.post-body th, .post-body td { padding: 10px 12px; border-bottom: 1px solid #dfe1ec; text-align: left; vertical-align: top; }
.post-body th { background: #101585; color: #fff; font-weight: 600; }
.post-body tbody tr:nth-child(even) { background: #f7f8fc; }

.post-author { display: flex; gap: 25px; align-items: flex-start; margin-top: 60px; padding-top: 30px; border-top: 1px solid #dfe1ec; font-size: 16px; line-height: 1.6; }
.post-author__photo { flex: none; width: 110px; height: 110px; border-radius: 50%; }
.post-author p { margin: 0; }
.post-author .post-author__name { color: #101585; font-size: 20px; font-weight: 700; }
.post-author .post-author__role { margin-bottom: 10px; color: #5c5c5c; }
@media (max-width: 575.98px) {
  .post-author { flex-direction: column; gap: 15px; }
  .post-author__photo { width: 90px; height: 90px; }
}

.post-quote { margin-top: 40px; padding: 40px 30px; border-radius: 8px; background: #f3f4fa; }
.post-quote h2 { margin-top: 0; }
.post-quote > p { margin-bottom: 30px; }
.post-quote .quote-form { font-size: 16px; line-height: 1.5; }
.post-quote .quote-form a { text-decoration: none; }
@media (max-width: 767.98px) { .post-quote { padding: 30px 15px; } }
/* What happens after sending: three steps of the same shape (number, a word, one short line). */
.post-body .quote-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 25px; margin: 0 0 30px; padding: 0; list-style: none; counter-reset: step; font-size: 15px; line-height: 1.45; }
.post-body .quote-steps li { position: relative; margin: 0; padding-left: 40px; counter-increment: step; }
.quote-steps li::before {
  content: counter(step); position: absolute; top: 3px; left: 0; width: 30px; height: 30px; border-radius: 50%;
  background: #101585; color: #fff; font-size: 14px; font-weight: 700; line-height: 30px; text-align: center;
}
.quote-steps strong { display: block; color: #101585; }
@media (max-width: 767.98px) { .post-body .quote-steps { grid-template-columns: 1fr; } }

.post-video { margin: 30px 0; }
.post-video figcaption { margin-top: 8px; color: #5c5c5c; font-size: 14px; }

/* Blog CTA blocks (content/cta.php, templates/partials/cta-*.php) */
.post-body .cta-line { margin: 30px 0; padding: 4px 0 4px 18px; border-left: 4px solid #ffdd44; font-size: 17px; }
.post-body .cta-card {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 30px; margin: 40px 0; padding: 30px;
  border-radius: 8px; background: #101585; color: #fff; font-size: 16px; line-height: 1.6;
}
.post-body .cta-card--text { grid-template-columns: 1fr; }
.cta-card__media { margin: 0; }
.cta-card__media video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #0a0e58; }
.cta-card__media figcaption { margin-top: 8px; color: rgba(255, 255, 255, .7); font-size: 13px; }
.post-body .cta-card__kicker { margin: 0 0 4px; color: #ffdd44; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.post-body .cta-card h3 { margin: 0 0 12px; color: #fff; }
.post-body .cta-checks { margin: 0 0 15px; padding: 0; list-style: none; }
.post-body .cta-checks li { position: relative; margin: 0; padding-left: 28px; }
.cta-checks li::before { content: "\2713"; position: absolute; top: 0; left: 0; color: #ffdd44; font-weight: 700; }
.post-body .cta-card__price { margin: 0 0 15px; color: #ffdd44; font-size: 24px; }
.post-body .cta-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0; }
.post-body .cta-card a { color: #fff; }
.post-body .cta-card a:hover, .post-body .cta-card a:focus-visible { color: #ffdd44; }
.post-body .cta-card .cta-button {
  padding: 10px 22px; border-radius: 4px; background: #ffdd44; color: #252525; font-weight: 600;
  text-decoration: none; transition: background .2s, color .2s;
}
.post-body .cta-card .cta-button:hover, .post-body .cta-card .cta-button:focus-visible { background: #fff; color: #101585; }
@media (max-width: 767.98px) { .post-body .cta-card { grid-template-columns: 1fr; gap: 20px; padding: 20px; } }

.video-picker__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.video-picker__item { display: block; padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; opacity: .6; transition: opacity .2s; }
.video-picker__item:hover, .video-picker__item:focus-visible, .video-picker__item.is-current { opacity: 1; }
.video-picker__item.is-current { border-color: #ffdd44; }
.video-picker__item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }

.more-posts { padding: 60px 0 80px; background: #f3f4fa; }
.more-posts h2 { margin: 0 0 30px; color: #101585; font-size: 30px; font-weight: 700; }
.blog-list { padding: 50px 0 80px; }

.post-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 991.98px) { .post-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .post-cards { grid-template-columns: 1fr; } }
.post-card { position: relative; display: flex; flex-direction: column; }
.post-card__image { width: 100%; height: auto; margin-bottom: 15px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; transition: opacity .4s; }
.post-card__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.post-card__title a { color: #252525; }
/* The whole card is the link. */
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title a, .post-card__title a:focus-visible { color: #101585; }
.post-card:hover .post-card__image { opacity: .85; }
.post-card__excerpt { margin: 0; color: #5c5c5c; font-size: 15px; }

/* Service pages (templates/pages/service.php, templates/service/): the site's navy and yellow, more air. */
.svc-kicker { margin: 0 0 8px; color: #0345bf; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.svc-button {
  display: inline-block; padding: 12px 26px; border-radius: 6px; background: #ffdd44; color: #252525;
  font-size: 17px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
.svc-button:hover, .svc-button:focus-visible { background: #101585; color: #fff; transform: translateY(-1px); }

.svc-checks { margin: 0; padding: 0; list-style: none; }
.svc-checks li { position: relative; padding-left: 30px; }
.svc-checks li + li { margin-top: 8px; }
.svc-checks li::before {
  content: ""; position: absolute; top: .3em; left: 0; width: 19px; height: 19px; border-radius: 50%;
  background: #101585 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.svc-checks--light li::before {
  background-color: #ffdd44;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23101585' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.svc-checks--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
.svc-checks--columns li + li { margin-top: 0; }
.svc-plus { margin: 0; padding: 0; list-style: none; }
.svc-plus li { position: relative; padding-left: 30px; }
.svc-plus li + li { margin-top: 8px; }
.svc-plus li::before {
  content: "+"; position: absolute; top: .3em; left: 0; width: 19px; height: 19px; border-radius: 50%;
  background: #f3f4fa; color: #101585; font-size: 15px; font-weight: 700; line-height: 19px; text-align: center;
}

/* Starts in the header's navy (no shadow between them), so the two run together, and drifts into violet. Two soft
   glows, the site's pink and blue, wander slowly along the bottom. */
body:has(.svc-hero) .site-header { box-shadow: none; }
.svc-hero {
  position: relative; isolation: isolate; overflow: hidden; padding: 60px 0 36px; color: #fff;
  background: linear-gradient(180deg, #101585 0%, #151890 30%, #26199a 70%, #3a1aa3 100%);
}
.svc-hero::before, .svc-hero::after {
  content: ""; position: absolute; z-index: -1; bottom: -45%; width: 70%; height: 90%; border-radius: 50%;
  animation: hero-glow 22s ease-in-out infinite alternate;
}
.svc-hero::before { right: -15%; background: radial-gradient(closest-side, rgba(251, 21, 242, .24), transparent); }
.svc-hero::after { left: -20%; background: radial-gradient(closest-side, rgba(3, 69, 191, .35), transparent); animation-direction: alternate-reverse; animation-duration: 28s; }
@keyframes hero-glow {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30%, -8%) scale(1.15); }
  100% { transform: translate(15%, 4%) scale(.95); }
}
@media (prefers-reduced-motion: reduce) { .svc-hero::before, .svc-hero::after, .hero::after, .hero__scroll::before { animation: none; } }
.svc-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.svc-hero__grid--text { grid-template-columns: minmax(0, 820px); }
.svc-hero h1 { margin: 0 0 18px; color: #fff; font-size: 42px; font-weight: 700; line-height: 1.12; }
.svc-hero__lead { margin: 0 0 22px; color: rgba(255, 255, 255, .9); font-size: 18px; line-height: 1.6; }
.svc-hero__lead a, .svc-hero__trust a { color: #ffdd44; font-weight: 600; text-decoration: none; }
.svc-hero__lead a:hover, .svc-hero__trust a:hover { color: #fff; }
.svc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 30px 0 0; }
.svc-hero__actions .svc-button:hover, .svc-hero__actions .svc-button:focus-visible { background: #fff; color: #101585; }
.svc-button--ghost { padding: 11px 25px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(16, 21, 133, .35); color: #fff; }
.svc-hero__trust { margin: 20px 0 0; color: rgba(255, 255, 255, .7); font-size: 14px; }
.svc-hero .video-thumb, .svc-hero .video-thumb img, .svc-hero .video-thumb iframe { border-radius: 10px; }
.svc-hero__media { position: relative; isolation: isolate; }
/* The dot grid at the bottom right corner of the video. The box has the video's size, so the grid sits at its corner,
   not at the thumbnails under it. The gradient shows only through the dots (first mask layer); the other two fade the
   grid out towards all four edges, so no dot is cut off. The grid is a whole number of dots (18 px) wide and high, and
   reaches past the video only as far as the page leaves room, else the edge of the hero would cut it. */
.svc-hero__corner { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; aspect-ratio: 16 / 9; pointer-events: none; }
.svc-hero__dots {
  position: absolute; right: -24px; bottom: -72px; width: 252px; height: 216px;
  background: linear-gradient(135deg, #fbaf15, #fb15f2, #6b3cff, #fbaf15) 0 0 / 300% 300%;
  --fade-x: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent);
  --fade-y: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
  -webkit-mask: radial-gradient(#000 2.2px, transparent 2.8px) 0 0 / 18px 18px, var(--fade-x), var(--fade-y);
  -webkit-mask-composite: source-in, source-in;
  mask: radial-gradient(#000 2.2px, transparent 2.8px) 0 0 / 18px 18px, var(--fade-x), var(--fade-y);
  mask-composite: intersect;
  animation: dots-flow 9s linear infinite, dots-drift 12s ease-in-out infinite;
}
@keyframes dots-flow { to { background-position: 100% 100%; } }
@keyframes dots-drift { 50% { transform: translate(-6px, -6px); } }
@media (min-width: 1400px) { .svc-hero__dots { right: -54px; } }
@media (max-width: 575.98px) { .svc-hero__dots { right: -10px; bottom: -54px; width: 162px; height: 144px; } }
@media (prefers-reduced-motion: reduce) { .svc-hero__dots { animation: none; } }
.svc-hero .video-picker__main { box-shadow: 0 25px 60px rgba(0, 0, 0, .35); }
.svc-hero .video-picker figcaption { color: rgba(255, 255, 255, .7); }
@media (max-width: 991.98px) { .svc-hero__grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 575.98px) {
  .svc-hero { padding: 30px 0 50px; }
  .svc-hero h1 { font-size: 32px; }
  .svc-hero__lead { font-size: 17px; }
  /* One button and a link, like the home hero */
  .svc-hero .svc-button--ghost { padding: 2px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .7); border-radius: 0; background: none; font-size: 15px; font-weight: 500; }
}

.video-picker--large { margin: 0; }
.video-picker--large .video-picker__list { gap: 10px; margin-top: 10px; }
.video-picker--large figcaption { margin-top: 10px; color: #5c5c5c; font-size: 14px; }
.video-picker--large .video-thumb, .video-picker--large .video-thumb img, .video-picker--large .video-thumb iframe { border-radius: 10px; }
/* The home page showreel in the hero of a service without its own reference video */
.svc-showreel { margin: 0; }
/* No background colour: at a fractional width (e.g. 125% display scaling) it would show as a thin dark line at the edge. */
.svc-showreel video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; box-shadow: 0 25px 60px rgba(0, 0, 0, .35); }
.svc-showreel figcaption { margin-top: 10px; color: rgba(255, 255, 255, .7); font-size: 14px; }

/* The client logos at the bottom of a hero (home and service pages): faded white, the strip's edges dissolve
   into the background. */
.svc-hero__logos { margin-top: 60px; }
.hero-logos h2 { margin: 0 0 4px; color: rgba(255, 255, 255, .55); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.hero-logos .logos {
  height: 50px; background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.hero-logos .logos::before, .hero-logos .logos::after { content: none; }
.hero-logos .logos__track img { filter: brightness(0) invert(1); opacity: .5; }
/* A logo drawn on a grey disc (Republic): the disc turns white and the light lines in it dark, as if cut out */
.hero-logos .logos__track img.logo--cut-out { filter: invert(1) brightness(2); }

.svc-section { padding: 84px 0; }
.svc-section--light { background: #f3f4fa; }
.svc-section__head { max-width: 780px; margin-bottom: 40px; }
.svc-section h2 { margin: 0 0 12px; color: #101585; font-size: 36px; font-weight: 700; line-height: 1.15; }
.svc-section h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.svc-section__lead { margin: 0; color: #4a4a4a; font-size: 18px; }
/* Links on the service pages are never underlined: the colour and weight set them apart. */
.svc-section p a:not(.svc-button), .svc-checks a, .svc-plus a { color: #0345bf; font-weight: 600; text-decoration: none; }
.svc-section p a:not(.svc-button):hover, .svc-checks a:hover, .svc-plus a:hover { color: #101585; }
.svc-section--dark p a:not(.svc-button) { color: #ffdd44; }
.svc-section--dark p a:not(.svc-button):hover { color: #fff; }
/* Dark band (navy, like the hero) for a section that should stand out. */
.svc-section--dark { background: linear-gradient(135deg, #101585, #26199a); color: #fff; }
.svc-section--dark h2 { color: #fff; }
.svc-section--dark .svc-section__lead { color: rgba(255, 255, 255, .8); }
.svc-note { margin: 30px 0 0; color: #5c5c5c; font-size: 15px; }
@media (max-width: 767.98px) {
  .svc-section { padding: 56px 0; }
  .svc-section h2 { font-size: 28px; }
  .svc-section__head { margin-bottom: 28px; }
  .svc-checks--columns { grid-template-columns: 1fr; gap: 10px; }
}

.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.svc-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-card { position: relative; padding: 30px 26px 26px; border: 1px solid #e3e5f0; border-radius: 10px; background: #fff; }
.svc-card::before { content: ""; position: absolute; top: -1px; left: 26px; width: 40px; height: 4px; border-radius: 0 0 4px 4px; background: #ffdd44; }
.svc-section:not(.svc-section--light) .svc-card { border-color: transparent; background: #f3f4fa; }
.svc-card p { margin: 0; color: #4a4a4a; font-size: 15px; }
@media (max-width: 991.98px) { .svc-cards, .svc-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .svc-cards, .svc-cards--2, .svc-cards--4 { grid-template-columns: 1fr; } }

.svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.svc-step { position: relative; padding-top: 58px; counter-increment: step; }
.svc-step::before {
  content: counter(step); position: absolute; top: 0; left: 0; z-index: 1; width: 42px; height: 42px; border-radius: 50%;
  background: #101585; color: #fff; font-weight: 700; line-height: 42px; text-align: center;
  transition: box-shadow .5s, background-color .5s;
}
/* The line to the next step, in the colours of the site's gradient button. site.js lights a number (is-lit), pauses,
   runs a light along its line (is-passing), leaves the line lit (is-passed) and moves on; at the end it all fades
   and starts again. */
.svc-step__line {
  position: absolute; top: 20px; left: 54px; right: -18px; height: 3px; overflow: hidden; border-radius: 3px;
  background: #e3e5f0;
}
.svc-step__line::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fb15f2, #0345bf);
  opacity: 0; transition: opacity .6s;
}
.svc-step__line::after {
  content: ""; position: absolute; inset: 0; width: 50%;
  background: linear-gradient(90deg, rgba(251, 21, 242, 0), #fb15f2 55%, #fbaf15 80%, rgba(251, 175, 21, 0));
  transform: translateX(-100%);
}
.svc-step.is-lit::before { background-color: #fb15f2; box-shadow: 0 0 0 5px rgba(251, 21, 242, .15), 0 0 24px rgba(251, 21, 242, .5); }
.svc-step.is-passing .svc-step__line::after { animation: step-light .9s ease-in-out forwards; }
.svc-step.is-passed::before { background-color: #0345bf; box-shadow: 0 0 0 5px rgba(3, 69, 191, .12); }
.svc-step.is-passed .svc-step__line::before { opacity: 1; }
@keyframes step-light { to { transform: translateX(300%); } }
.svc-step h3 { margin-bottom: 4px; font-size: 18px; }
.svc-step__time { margin: 0 0 8px; color: #0345bf; font-size: 14px; font-weight: 600; }
.svc-step p:last-child { margin: 0; color: #4a4a4a; font-size: 15px; }
@media (max-width: 767.98px) {
  .svc-steps { grid-template-columns: 1fr; gap: 24px; }
  .svc-step { padding: 0 0 0 58px; }
  .svc-step__line { top: 50px; bottom: -18px; left: 20px; right: auto; width: 3px; height: auto; }
  .svc-step__line::before { background: linear-gradient(180deg, #fb15f2, #0345bf); }
  .svc-step__line::after { width: auto; height: 50%; background: linear-gradient(180deg, rgba(251, 21, 242, 0), #fb15f2 55%, #fbaf15 80%, rgba(251, 175, 21, 0)); transform: translateY(-100%); }
  @keyframes step-light-down { to { transform: translateY(300%); } }
  .svc-step.is-passing .svc-step__line::after { animation-name: step-light-down; }
}

.svc-price {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); overflow: hidden;
  border-radius: 12px; background: #fff; box-shadow: 0 10px 40px rgba(16, 21, 133, .08);
}
.svc-price__main { padding: 36px; background: #101585; color: #fff; }
.svc-price__label { margin: 0 0 6px; color: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.svc-price__value { margin: 0 0 12px; color: #ffdd44; font-size: 38px; font-weight: 700; line-height: 1.1; }
.svc-price__note { margin: 0; color: rgba(255, 255, 255, .85); font-size: 15px; }
/* Links on the navy price box: white, above the blue of the section links */
.svc-section .svc-price__main a:not(.svc-button) { color: #fff; }
.svc-section .svc-price__main a:not(.svc-button):hover { color: #ffdd44; }
.svc-price__actions { margin: 26px 0 0; }
.svc-price__actions .svc-button:hover, .svc-price__actions .svc-button:focus-visible { background: #fff; color: #101585; }
.svc-price__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding: 36px; font-size: 15px; }
.svc-price__lists h3 { margin-bottom: 14px; font-size: 17px; }
@media (max-width: 991.98px) { .svc-price { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
  .svc-price__main, .svc-price__lists { padding: 26px 20px; }
  .svc-price__lists { grid-template-columns: 1fr; }
}

.svc-case { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 50px; align-items: start; }
.svc-case__text > p { margin: 0 0 16px; }
.svc-case__text > p:last-child { margin-bottom: 0; }
/* The task, the solution and the result in a row under the story. */
.svc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 44px 0 0; }
.svc-facts > div { padding: 24px 26px; border-top: 4px solid #ffdd44; border-radius: 4px 4px 10px 10px; background: #fff; }
.svc-section:not(.svc-section--light) .svc-facts > div { background: #f3f4fa; }
.svc-facts dt { color: #101585; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.svc-facts dd { margin: 8px 0 0; color: #4a4a4a; font-size: 15px; }
/* Without videos (the hero already shows them): the story runs full width. */
.svc-case--text { display: block; }
.svc-case--text .svc-case__text > p { max-width: 820px; }
@media (max-width: 991.98px) { .svc-case { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 767.98px) { .svc-facts { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; } }

.svc-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.svc-feature { padding: 30px; border: 1px solid #e3e5f0; border-radius: 10px; background: #fff; }
.svc-section:not(.svc-section--light) .svc-feature { border-color: transparent; background: #f3f4fa; }
.svc-feature p { color: #4a4a4a; }
.svc-feature > :last-child { margin-bottom: 0; }
@media (max-width: 767.98px) { .svc-features { grid-template-columns: 1fr; } .svc-feature { padding: 24px 20px; } }

.svc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.svc-stat { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); }
.svc-stat strong { display: block; margin-bottom: 12px; color: #ffdd44; font-size: 38px; font-weight: 700; line-height: 1; white-space: nowrap; }
.svc-stat p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 15px; }
@media (max-width: 991.98px) { .svc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .svc-stats { grid-template-columns: 1fr; gap: 22px; } .svc-stat strong { font-size: 38px; } }

.svc-faq { max-width: 860px; }
.svc-faq--split { max-width: none; }
@media (min-width: 992px) { .svc-faq--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; align-items: start; } }
.svc-faq__item { border-bottom: 1px solid #dfe1ec; }
.svc-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; }
.svc-faq__item summary::-webkit-details-marker { display: none; }
.svc-faq__item summary h3 { margin: 0; font-size: 18px; font-weight: 600; }
.svc-faq__item summary::after {
  content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #f3f4fa; color: #101585;
  font-size: 22px; line-height: 32px; text-align: center;
}
.svc-section--light .svc-faq__item summary::after { background: #fff; }
.svc-faq__item[open] summary::after { content: "\2212"; }
.svc-faq__item p { margin: -6px 0 22px; color: #4a4a4a; }

/* The quote request closes the page, right above the footer: navy with two brand-coloured lights slowly wandering
   at the top (as in the hero), running down into the footer's navy with no line between them; light fields. */
.svc-quote { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(180deg, #26199a, #101585 75%); }
.svc-quote::before, .svc-quote::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.svc-quote::before { top: -200px; left: 5%; width: 560px; height: 460px; background: rgba(251, 21, 242, .2); animation: quote-light-pink 14s ease-in-out infinite; }
.svc-quote::after { top: -120px; right: -120px; width: 540px; height: 440px; background: rgba(251, 175, 21, .24); animation: quote-light-orange 17s ease-in-out infinite; }
/* Each light wanders its own loop and breathes a little, so the two never move in step. */
@keyframes quote-light-pink {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .8; }
  33% { transform: translate(220px, 70px) scale(1.12); opacity: 1; }
  66% { transform: translate(90px, 150px) scale(.92); opacity: .7; }
}
@keyframes quote-light-orange {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  40% { transform: translate(-200px, 110px) scale(1.15); opacity: .75; }
  70% { transform: translate(-60px, 40px) scale(.95); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .svc-quote::before, .svc-quote::after { animation: none; } }
body:has(.svc-quote) .site-footer__grid { border-top: 0; }
.svc-quote__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 60px; align-items: start; }
.svc-quote__intro { display: grid; gap: 28px; }
.svc-quote h2 { color: #fff; }
.svc-quote__lead { margin: 0; color: rgba(255, 255, 255, .88); font-size: 18px; }
.svc-quote .quote-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; line-height: 1.4; }
.svc-quote .quote-steps li { position: relative; padding-left: 40px; counter-increment: step; }
.svc-quote .quote-steps li::before { background: #ffdd44; color: #101585; }
.svc-quote .quote-steps strong { color: #ffdd44; }
.svc-contact { display: flex; gap: 14px; align-items: center; font-size: 15px; line-height: 1.45; }
.svc-contact img { flex: none; width: 56px; height: 56px; border-radius: 50%; }
.svc-contact span { color: rgba(255, 255, 255, .75); }
.svc-contact__links { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-contact__links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s;
}
.svc-contact__links a:hover, .svc-contact__links a:focus-visible { border-color: #ffdd44; color: #ffdd44; }
/* The form: the name on its own row, email and phone side by side, then the message */
.svc-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svc-form__wide { grid-column: 1 / -1; }
/* Beside the quote text the form runs as tall as the text, and the message field takes the room that is left */
@media (min-width: 992px) {
  .svc-quote__grid { align-items: stretch; }
  .svc-quote .svc-form { display: flex; flex-direction: column; }
  .svc-quote .svc-form__grid { flex: 1; grid-template-rows: auto auto 1fr; }
  .svc-quote .svc-form__grid > :last-child { display: flex; flex-direction: column; }
  .svc-quote textarea.svc-field { flex: 1; }
}
.svc-form legend { margin-bottom: 10px; padding: 0; }
.svc-form__label { display: block; margin: 0 0 6px; color: rgba(255, 255, 255, .9); font-size: 14px; font-weight: 600; }
.svc-form__label small { color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 400; }
.svc-field {
  display: block; width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 8px; background: #fff;
  color: #252525; font: inherit; font-size: 16px; line-height: 1.4; transition: border-color .2s, box-shadow .2s;
}
.svc-field::placeholder { color: #9a9fb5; }
.svc-field:focus { border-color: #ffdd44; outline: 0; box-shadow: 0 0 0 3px rgba(255, 221, 68, .35); }
textarea.svc-field { min-height: 120px; resize: vertical; }
.svc-choice { position: absolute; width: 1px; height: 1px; opacity: 0; }
.svc-choice:focus-visible + .svc-box::before { outline: 2px solid #ffdd44; outline-offset: 2px; }
.svc-form .cf-turnstile:not(:empty) { margin-top: 18px; }
.svc-form .quote-form__status { margin: 18px 0 0; }
.svc-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.svc-privacy { color: rgba(255, 255, 255, .85); font-size: 14px; }
.svc-box { position: relative; display: inline-block; padding-left: 28px; cursor: pointer; }
.svc-box::before { content: ""; position: absolute; top: 1px; left: 0; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 4px; }
.svc-choice:checked + .svc-box::before { border-color: #ffdd44; background: #ffdd44; }
.svc-choice:checked + .svc-box::after { content: "\2713"; position: absolute; top: 1px; left: 4px; color: #101585; font-size: 14px; font-weight: 700; }
.svc-privacy a { color: #ffdd44; font-weight: 600; text-decoration: none; }
.svc-privacy a:hover { color: #fff; }
.svc-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 30px; border: 0; border-radius: 8px;
  background: #ffdd44; color: #101585; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: background .2s, transform .2s;
}
.svc-submit:hover, .svc-submit:focus-visible { background: #fff; transform: translateY(-1px); }
.svc-submit:disabled { opacity: .6; cursor: wait; }
/* The same form on a light background (blog posts) */
.svc-form--light .svc-form__label { color: #252525; }
.svc-form--light .svc-form__label small { color: #5c5c5c; }
.svc-form--light .svc-field { border-color: #d5d7e6; }
.svc-form--light .svc-field:focus { border-color: #101585; box-shadow: 0 0 0 3px rgba(16, 21, 133, .15); }
.svc-form--light .svc-choice:focus-visible + .svc-box::before { outline-color: #101585; }
.svc-form--light .svc-privacy { color: #252525; }
.svc-form--light .svc-box::before { border-color: #101585; }
.svc-form--light .svc-choice:checked + .svc-box::before { border-color: #101585; background: #101585; }
.svc-form--light .svc-choice:checked + .svc-box::after { color: #fff; }
.svc-form--light .svc-privacy a { color: #101585; }
.svc-form--light .svc-privacy a:hover { color: #0345bf; }
.svc-form--light .svc-submit { background: #101585; color: #fff; }
.svc-form--light .svc-submit:hover, .svc-form--light .svc-submit:focus-visible { background: #0345bf; }
@media (max-width: 991.98px) { .svc-quote__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 767.98px) { .svc-form__grid { grid-template-columns: 1fr; } .svc-submit { width: 100%; } }

/* Phones: the offer button and the phone number at the bottom, while the hero and the form are out of view (site.js) */
.svc-sticky { display: none; }
@media (max-width: 767.98px) {
  .svc-sticky {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; display: flex; gap: 10px;
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .12); transform: translateY(110%); transition: transform .25s;
  }
  .svc-sticky.is-visible { transform: none; }
  .svc-sticky .svc-button { flex: 1; }
  .svc-sticky__call { display: flex; align-items: center; justify-content: center; width: 50px; border-radius: 6px; background: #101585; color: #fff; }
}