/*
 * Site-specific additions that sit on top of the ported main.css
 * without editing it directly. Loaded after main.css/plugins.css so
 * these rules can extend or override them where needed.
 */

/* ------------------------------------------------*/
/* Homepage Contact Section - light tint */
/* ------------------------------------------------*/
/* Light tint so the contact section reads as its own band between the
   white sections around it, with a soft blue wash behind the form. */
#book.mxd-section {
  position: relative;
  overflow: hidden;
}
/* Content needs to be explicitly promoted above .mxd-book-fx: a plain
   position:absolute/z-index:0 decorative layer would otherwise still
   paint over ordinary in-flow content per CSS's stacking rules
   (positioned z-index:0/auto descendants paint after non-positioned
   in-flow ones), the same reason the hero promotes its own headline
   to position:relative. */
#book.mxd-section > .mxd-container {
  position: relative;
  z-index: 1;
}

/* Decorative layer: a diagonal blue wash from the top-left corner and a
   fainter one bottom-right, with a long flat stretch of the section's own
   tint in between so it never competes with the form. A slow diagonal sheen
   sweeps across. Same ground rules as any decorative layer: non-solid,
   aria-hidden, pointer-events:none, first child so it paints behind the
   content, and respects reduced-motion. */
.mxd-book-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mxd-book-fx__mesh {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    rgba(0, 43, 186, 0.22) 0%,
    rgba(243, 246, 255, 0) 24%,
    rgba(243, 246, 255, 0) 76%,
    rgba(79, 111, 224, 0.16) 100%
  );
  filter: blur(40px);
}
.mxd-book-fx__sheen {
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(0, 43, 186, 0.05) 48%,
    transparent 60%
  );
  background-size: 250% 250%;
  animation: mxd-book-fx-sheen 14s ease-in-out infinite;
}
@keyframes mxd-book-fx-sheen {
  0%,
  100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mxd-book-fx__sheen {
    animation: none;
  }
}

/* ------------------------------------------------*/
/* Homepage Contact Form (Contact Form 7 #9406efe) */
/* ------------------------------------------------*/
/* CF7 renders its own field template (.agency-contact-form /
   .form-row / .form-group / .submit-btn), so main.css's generic
   `form input, form textarea` rules don't reach it (no such
   selectors), and there's no existing <select> or filled-button
   styling to inherit either. This mirrors the theme's existing
   language instead: borderless underline inputs (main.css `form
   input`), uppercase JetBrains Mono micro-labels (.meta-tag), and the
   filled accent pill used for primary CTAs (.btn-default-accent). */

.mxd-form-container .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}
.mxd-form-container .form-row .form-group {
  flex: 1 1 100%;
}
@media only screen and (min-width: 768px) {
  .mxd-form-container .form-row .form-group {
    flex: 1 1 calc(50% - 1.5rem);
  }
}

.mxd-form-container .form-group {
  margin-bottom: 3rem;
}
.mxd-form-container .form-group p {
  margin: 0;
}

.mxd-form-container label {
  display: block;
  margin-bottom: 0.8rem;
  font: normal 600 1.3rem/1.6 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--t-medium);
}

.mxd-form-container input[type="text"],
.mxd-form-container input[type="email"],
.mxd-form-container input[type="tel"],
.mxd-form-container select,
.mxd-form-container textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.2rem 0.2rem;
  border: none;
  border-bottom: 1px solid var(--st-medium);
  border-radius: 0;
  outline: none;
  background-color: transparent;
  font: normal 400 1.8rem/1.5 var(--_font-default);
  color: var(--t-bright);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color var(--_animspeed-medium) var(--_animbezier);
}
.mxd-form-container input::-webkit-input-placeholder,
.mxd-form-container textarea::-webkit-input-placeholder {
  color: var(--t-medium);
}
.mxd-form-container input::placeholder,
.mxd-form-container textarea::placeholder {
  color: var(--t-medium);
  opacity: 1;
}
.mxd-form-container input:focus,
.mxd-form-container select:focus,
.mxd-form-container textarea:focus {
  border-bottom-color: var(--st-bright);
}
.mxd-form-container textarea {
  min-height: 14rem;
  line-height: 1.6;
  resize: vertical;
}

/* Native <select> has no equivalent elsewhere in the theme, so it
   gets its own chevron rather than the browser default arrow, kept
   in the same thin-stroke line-icon style as the rest of the UI. */
.mxd-form-container select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23949291' stroke-width='1.5' d='M3 6l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  background-size: 1.2rem;
  cursor: pointer;
}
.mxd-form-container select:invalid {
  color: var(--t-medium);
}
/* The dropdown's own popup list is native OS/browser chrome, not
   covered by the transparent background on <select> above - without
   this the options use the browser default. */
.mxd-form-container select option {
  background-color: var(--base);
  color: var(--t-bright);
}

/* Filled accent button, matching .btn.btn-default-icon.btn-default-accent's
   colors (see "View all case studies" on the homepage) without depending
   on those classes being present in the CF7 template - square corners,
   no border-radius, per the site's buttons. */
.mxd-form-container .submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1rem;
  padding: 1.6rem 2.4rem;
  border: 1px solid var(--accent);
  background-color: var(--accent);
  font: normal 500 1.6rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--pt-t-accent-bright);
  cursor: pointer;
  transition:
    transform var(--_animspeed-medium) var(--_animbezier),
    opacity var(--_animspeed-medium) var(--_animbezier);
}
.mxd-form-container .submit-btn span {
  display: inline-flex;
  transition: transform var(--_animspeed-medium) var(--_animbezier);
}
.no-touch .mxd-form-container .submit-btn:hover {
  transform: scale(1.04);
}
.no-touch .mxd-form-container .submit-btn:hover span {
  transform: translateX(0.4rem);
}
.mxd-form-container .submit-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.mxd-form-container .wpcf7-response-output {
  margin: 2rem 0 0;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--st-medium);
  border-radius: 0.4rem;
  font: normal 500 1.4rem/1.6 var(--_font-default);
  color: var(--t-medium);
}
.mxd-form-container form.sent .wpcf7-response-output {
  border-color: var(--accent);
  color: var(--t-bright);
}
.mxd-form-container form.invalid .wpcf7-response-output,
.mxd-form-container form.unaccepted .wpcf7-response-output,
.mxd-form-container form.payment-required .wpcf7-response-output,
.mxd-form-container form.spam .wpcf7-response-output,
.mxd-form-container form.aborted .wpcf7-response-output {
  border-color: #c0392b;
  color: #c0392b;
}
.mxd-form-container .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.6rem;
  font: normal 500 1.3rem/1.5 var(--_font-default);
  color: #c0392b;
}

/* ------------------------------------------------*/
/* Blog (page-blog.php, single.php, archive/search) */
/* ------------------------------------------------*/

/* Visually hidden, still announced by screen readers (form labels). */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* .auto-height's default top padding is for a marquee CTA variant the
   blog CTA doesn't use (same fix as the case-study templates). */
.mxd-promo__wrap.auto-height {
  padding-top: 0;
}

/* Blog index title: h1.large is nowrap at 12rem, sized for a one-word
   demo title. Category names and search queries can be long. */
h1.large.blog-title {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 4.4rem;
}
@media only screen and (min-width: 768px) {
  h1.large.blog-title {
    font-size: 7.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  h1.large.blog-title {
    font-size: 9rem;
  }
}
@media only screen and (min-width: 1600px) {
  h1.large.blog-title {
    font-size: 11rem;
  }
}

/* Article title: h1.small is 9.5rem at desktop, too large for real
   post titles. */
.mxd-article__title h1.small {
  font-size: 3.8rem;
  overflow-wrap: break-word;
}
@media only screen and (min-width: 768px) {
  .mxd-article__title h1.small {
    font-size: 5.2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-article__title h1.small {
    font-size: 6.4rem;
  }
}

/* Search button: the template used an icon font that isn't shipped, so
   the magnifier is an inline SVG. */
.widget-search .btn-form svg {
  width: 1.8rem;
  height: 1.8rem;
}
.widget-search .btn-form i {
  align-items: center;
}

.mxd-blog-pagination__item.blog-pagination-dots {
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  color: var(--t-medium);
}

/* Anchor links from the table of contents shouldn't hide under the
   fixed header. */
.mxd-article__body h2,
.mxd-article__body h3 {
  scroll-margin-top: 12rem;
}

/* Post body: the theme styles article content block by block
   (.mxd-article__normal etc.). The WordPress editor outputs plain
   elements inside one wrapper, so style those the same way. */
.mxd-article__body > * {
  margin: 0;
}
.mxd-article__body > * + * {
  margin-top: 3rem;
}
.mxd-article__body > h2,
.mxd-article__body > h3,
.mxd-article__body > h4 {
  margin-top: 5rem;
}
.mxd-article__body > h2 {
  font: normal 700 3.4rem/1.2 var(--_font-default);
  letter-spacing: -0.1rem;
  color: var(--t-bright);
}
@media only screen and (min-width: 768px) {
  .mxd-article__body > h2 {
    font-size: 4rem;
  }
}
.mxd-article__body p,
.mxd-article__body figcaption,
.mxd-article__body .wp-element-caption {
  font: normal 500 1.8rem/1.6 var(--_font-default);
  color: var(--t-medium);
}
.mxd-article__body figcaption,
.mxd-article__body .wp-element-caption {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  text-align: center;
}
.mxd-article__body strong,
.mxd-article__body b {
  font-weight: 700;
  color: var(--t-bright);
}
.mxd-article__body p a,
.mxd-article__body li a {
  font-weight: 700;
  color: var(--t-bright);
  text-decoration: underline;
}
@media only screen and (min-width: 768px) {
  .mxd-article__body p {
    font-size: 2rem;
  }
}
.mxd-article__body img,
.mxd-article__body video,
.mxd-article__body iframe {
  display: block;
  max-width: 100%;
  height: auto;
}
.mxd-article__body figure {
  margin-left: 0;
  margin-right: 0;
}
.mxd-article__body blockquote {
  margin: 0;
  padding: 4.2rem 0 5.3rem;
  border-top: 1px solid var(--st-medium);
  border-bottom: 1px solid var(--st-medium);
}
.mxd-article__body blockquote p {
  font: normal 700 2.8rem/1.4 var(--_font-default);
  letter-spacing: -0.1rem;
  color: var(--t-bright);
}
@media only screen and (min-width: 768px) {
  .mxd-article__body blockquote p {
    font-size: 3.6rem;
  }
}
.mxd-article__body blockquote cite {
  display: block;
  margin-top: 1.2rem;
  color: var(--t-medium);
  font: normal 600 1.4rem/1.6 var(--_font-accent);
  text-transform: uppercase;
  font-style: normal;
}
.mxd-article__body pre,
.mxd-article__body code {
  font-family: var(--_font-accent);
  font-size: 1.5rem;
}
.mxd-article__body pre {
  padding: 2.4rem;
  overflow-x: auto;
  background: var(--base-tint);
  color: var(--t-bright);
}
.mxd-article__body :not(pre) > code {
  padding: 0.2rem 0.6rem;
  background: var(--base-tint);
  color: var(--t-bright);
}
.mxd-article__body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.mxd-article__body th,
.mxd-article__body td {
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--st-medium);
  font: normal 500 1.6rem/1.5 var(--_font-default);
  color: var(--t-medium);
  text-align: left;
}
.mxd-article__body th {
  color: var(--t-bright);
}
.mxd-article__body hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--st-medium);
}
.mxd-article__body .alignleft,
.mxd-article__body .alignright {
  max-width: 100%;
}
.mxd-article__body .aligncenter {
  margin-left: auto;
  margin-right: auto;
}
.mxd-article__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Author box: initials circle instead of an external Gravatar request. */
.mxd-article-author__initials,
.mxd-comment__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--accent);
  color: var(--base);
  font: normal 700 2.4rem/1 var(--_font-default);
}
.mxd-article-author__initials {
  flex: 0 0 auto;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
}
.mxd-comment__text p {
  margin: 0 0 1rem;
}
.mxd-comment__reply .comment-reply-link .btn-caption {
  pointer-events: none;
}

/* Comment form (inputs/textarea inherit the theme's `form input` look). */
.comments-respond__form .comment-reply-title small {
  margin-left: 1.2rem;
  font-size: 1.4rem;
  font-weight: 500;
}
.comments-respond__form .comment-reply-title small a {
  text-decoration: underline;
}
.comments-respond__form .comment-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media only screen and (min-width: 768px) {
  .comments-respond__form .comment-form {
    grid-template-columns: 1fr 1fr;
    column-gap: 5rem;
  }
  .comments-respond__form .comment-form > .comment-notes,
  .comments-respond__form .comment-form > .comment-form-comment,
  .comments-respond__form .comment-form > .comment-form-cookies-consent,
  .comments-respond__form .comment-form > .form-submit {
    grid-column: 1 / -1;
  }
}
.comments-respond__form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}
.comments-respond__form .comment-form-cookies-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: 0.4rem;
  padding: 0;
  border: 1px solid var(--st-medium);
}
.comments-respond__form .comment-form-cookies-consent label {
  font: normal 500 1.5rem/1.5 var(--_font-default);
  color: var(--t-medium);
}
.comments-respond__form .comment-notes {
  margin: 0;
}

/* Sidebar thumbnails: the anchor must fill the fixed-height box so the
   image's height:100% / object-fit:cover can crop uploads of any ratio. */
.recent-post__thumb a {
  height: 100%;
}

/* ------------------------------------------------*/
/* Section themes: white / tint / blue / dark       */
/* ------------------------------------------------*/
/* The light theme alternates full-width bands so the page has rhythm
   instead of one long white sheet. Each band re-defines the colour tokens
   components already read (--base, --t-bright, --st-medium ...), so every
   component inside it (type, hairlines, tags, cards, buttons) re-themes
   itself without per-component rules. Backgrounds layer soft radial blue
   glows over a base gradient; a hairline grid (masked) adds depth.
   Add a class to any .mxd-section to use one:
     .sec-white  white with a faint blue wash
     .sec-tint   light blue gradient
     .sec-blue   brand blue gradient, white type
     .sec-dark   near-black with blue glows, white type              */
.sec-white,
.sec-tint,
.sec-blue,
.sec-dark {
  position: relative;
  isolation: isolate;
}
.sec-blue::before,
.sec-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(
    ellipse 80% 70% at 70% 20%,
    #000 0%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 80% 70% at 70% 20%,
    #000 0%,
    transparent 75%
  );
}
.sec-dark::before {
  opacity: 0.55;
}

.sec-white {
  background:
    radial-gradient(
      55% 45% at 100% 0%,
      rgba(99, 102, 255, 0.11) 0%,
      rgba(99, 102, 255, 0) 70%
    ),
    radial-gradient(
      50% 45% at 0% 100%,
      rgba(0, 43, 186, 0.08) 0%,
      rgba(0, 43, 186, 0) 70%
    ),
    linear-gradient(180deg, #ffffff 0%, #f5f7ff 55%, #eef1ff 100%);
}

.sec-tint {
  --base-tint: #ffffff;
  --base-tint-rgb: 255, 255, 255;
  --st-medium: #b3bfdc;
  background:
    radial-gradient(
      60% 55% at 100% 0%,
      rgba(0, 43, 186, 0.14) 0%,
      rgba(0, 43, 186, 0) 70%
    ),
    radial-gradient(
      45% 45% at 0% 100%,
      rgba(79, 111, 224, 0.16) 0%,
      rgba(79, 111, 224, 0) 70%
    ),
    linear-gradient(180deg, #f6f8ff 0%, #e8eeff 60%, #dde7ff 100%);
}

.sec-blue {
  --base: #001f9a;
  --base-rgb: 0, 31, 154;
  --base-tint: rgba(255, 255, 255, 0.09);
  --base-tint-rgb: 255, 255, 255;
  --base-opp: #ffffff;
  --base-opp-rgb: 255, 255, 255;
  --accent: #ffffff;
  --t-bright: #ffffff;
  --t-medium: rgba(255, 255, 255, 0.8);
  --t-muted: rgba(255, 255, 255, 0.6);
  --t-muted-extra: rgba(255, 255, 255, 0.14);
  --t-opp-bright: #0a0a0a;
  --t-opp-medium: #4a5163;
  --t-opp-muted: #7a8196;
  --st-muted: rgba(255, 255, 255, 0.16);
  --st-medium: rgba(255, 255, 255, 0.34);
  --st-bright: #ffffff;
  color: var(--t-bright);
  background:
    radial-gradient(
      55% 60% at 90% 0%,
      rgba(120, 160, 255, 0.45) 0%,
      rgba(120, 160, 255, 0) 70%
    ),
    radial-gradient(
      50% 55% at 0% 100%,
      rgba(0, 12, 90, 0.7) 0%,
      rgba(0, 12, 90, 0) 70%
    ),
    linear-gradient(135deg, #00188a 0%, #002bba 45%, #1747ff 100%);
}

.sec-dark {
  --base: #040406;
  --base-rgb: 4, 4, 6;
  --base-tint: #0f0f17;
  --base-tint-rgb: 15, 15, 23;
  --base-bright: #000000;
  --base-opp: #ffffff;
  --base-opp-rgb: 255, 255, 255;
  --accent: #4a6dff;
  --t-bright: #ffffff;
  --t-medium: #a9aec4;
  --t-muted: #7f84a1;
  --t-muted-extra: #14141e;
  --t-opp-bright: #0a0a0a;
  --t-opp-medium: #4a5163;
  --t-opp-muted: #7a8196;
  --st-muted: #14141e;
  --st-medium: #2b2d40;
  --st-bright: #ffffff;
  color: var(--t-bright);
  background:
    radial-gradient(
      60% 55% at 90% -5%,
      rgba(112, 66, 255, 0.5) 0%,
      rgba(112, 66, 255, 0) 68%
    ),
    radial-gradient(
      55% 60% at 0% 108%,
      rgba(0, 43, 186, 0.55) 0%,
      rgba(0, 43, 186, 0) 70%
    ),
    linear-gradient(180deg, #040406 0%, #08080f 100%);
}
/* the footer already paints its own background-color, so out-specify it */
.mxd-footer.sec-dark {
  background:
    radial-gradient(
      60% 55% at 90% -5%,
      rgba(112, 66, 255, 0.5) 0%,
      rgba(112, 66, 255, 0) 68%
    ),
    radial-gradient(
      55% 60% at 0% 108%,
      rgba(0, 43, 186, 0.55) 0%,
      rgba(0, 43, 186, 0) 70%
    ),
    linear-gradient(180deg, #040406 0%, #08080f 100%);
}

/* Industry cards sit on a tinted band: give it room above and below. */
.niche-section {
  padding-top: 8rem;
  padding-bottom: 10rem;
}
@media only screen and (min-width: 1200px) {
  .niche-section {
    padding-top: 12rem;
    padding-bottom: 14rem;
  }
}

/* Inner pages (case study, case studies, blog, archive): a soft blue wash
   behind the headline that fades to white. */

/* Full-bleed call-to-action bands: premium blue gradient / near-black glow
   instead of flat fills. */
.mxd-gravity-section.accent {
  background:
    radial-gradient(
      50% 70% at 85% 0%,
      rgba(140, 175, 255, 0.45) 0%,
      rgba(140, 175, 255, 0) 70%
    ),
    linear-gradient(135deg, #00188a 0%, #002bba 45%, #1747ff 100%);
}
.bg-color-opposite {
  background:
    radial-gradient(
      60% 80% at 85% 0%,
      rgba(112, 66, 255, 0.45) 0%,
      rgba(112, 66, 255, 0) 70%
    ),
    radial-gradient(
      50% 70% at 5% 100%,
      rgba(0, 43, 186, 0.5) 0%,
      rgba(0, 43, 186, 0) 70%
    ),
    linear-gradient(180deg, #040406 0%, #08080f 100%);
}

/* Fixed menu button: dark lines on light bands, white on dark/blue bands
   (toggled by mxdHamburgerTone() in app.js) and white whenever the
   full-screen menu is open (its overlay is black). */
.mxd-menu__contain {
  mix-blend-mode: normal;
}
.mxd-menu__contain .hamburger__line {
  background-color: #0a0a0a;
}
.mxd-menu__contain.on-dark .hamburger__line,
.mxd-menu__hamburger.active .hamburger__line {
  background-color: #ffffff;
}

/* ------------------------------------------------*/
/* Premium dark hero + dark-top pages               */
/* ------------------------------------------------*/
/* Hero: deep black with a violet bloom top-right and a brand-blue bloom
   bottom-left (same recipe as every dark band), plus a centre haze so the
   headline sits in light rather than flat black. */
.sec-hero {
  background:
    radial-gradient(
      45% 45% at 50% 42%,
      rgba(98, 60, 220, 0.28) 0%,
      rgba(98, 60, 220, 0) 70%
    ),
    radial-gradient(
      60% 55% at 92% -5%,
      rgba(124, 77, 255, 0.55) 0%,
      rgba(124, 77, 255, 0) 66%
    ),
    radial-gradient(
      60% 60% at 0% 105%,
      rgba(0, 43, 186, 0.7) 0%,
      rgba(0, 43, 186, 0) 68%
    ),
    linear-gradient(180deg, #030305 0%, #07070e 100%);
}
.sec-hero::before {
  display: none;
}

/* Pages that open on a dark band: header text and logo go light. */
.dark-top .mxd-header {
  --t-bright: #ffffff;
  --t-medium: #a9aec4;
  --st-bright: #ffffff;
  color: #ffffff;
}

/* Inner-page headline bands get a little air below the breadcrumbs. */
.sec-headline {
  padding-bottom: 4rem;
}

/* Primary buttons use the theme's solid accent (no gradient, no glow). */

/* Dark-top inner pages: let the dark headline band run to the very top of
   the page (under the header) instead of starting below main's top padding,
   so the white logo/header text sit on the band, not on a white strip. */
.dark-top .mxd-page-content.inner-page-content {
  padding-top: 0;
}
.dark-top .sec-headline {
  padding-top: 6.3rem;
}
@media only screen and (min-width: 768px) {
  .dark-top .sec-headline {
    padding-top: 7rem;
  }
}

/* ------------------------------------------------*/
/* Premium white gradient                           */
/* ------------------------------------------------*/
/* White bands are a pearl-to-periwinkle gradient with a violet bloom and a
   brand-blue bloom (.sec-white above). Each white section on the homepage
   moves the blooms so neighbouring bands don't repeat exactly. Pages
   without section classes (case studies list, case-study bodies, blog
   index body) get the same recipe on the page container. */
#work.sec-white {
  background:
    radial-gradient(
      55% 45% at 100% 0%,
      rgba(99, 102, 255, 0.18) 0%,
      rgba(99, 102, 255, 0) 70%
    ),
    radial-gradient(
      50% 45% at 0% 100%,
      rgba(0, 43, 186, 0.14) 0%,
      rgba(0, 43, 186, 0) 70%
    ),
    linear-gradient(180deg, #ffffff 0%, #f5f7ff 55%, #e4e9ff 100%);
}
#capabilities.sec-white {
  background:
    radial-gradient(
      55% 40% at 0% 0%,
      rgba(0, 43, 186, 0.14) 0%,
      rgba(0, 43, 186, 0) 70%
    ),
    radial-gradient(
      50% 45% at 100% 100%,
      rgba(124, 77, 255, 0.16) 0%,
      rgba(124, 77, 255, 0) 70%
    ),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 50%, #e8ecff 100%);
}
#reviews.sec-white {
  background:
    radial-gradient(
      60% 50% at 50% 0%,
      rgba(99, 102, 255, 0.2) 0%,
      rgba(99, 102, 255, 0) 70%
    ),
    radial-gradient(
      45% 45% at 100% 100%,
      rgba(0, 43, 186, 0.14) 0%,
      rgba(0, 43, 186, 0) 70%
    ),
    linear-gradient(180deg, #ffffff 0%, #f3f5ff 60%, #e2e7ff 100%);
}
.mxd-page-content {
  background:
    radial-gradient(
      45% 35% at 100% 0%,
      rgba(99, 102, 255, 0.08) 0%,
      rgba(99, 102, 255, 0) 70%
    ),
    radial-gradient(
      45% 35% at 0% 100%,
      rgba(0, 43, 186, 0.06) 0%,
      rgba(0, 43, 186, 0) 70%
    ),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
}

/* ------------------------------------------------*/
/* Testimonial cards                                */
/* ------------------------------------------------*/
/* Solid near-black cards on the white band: one uniform colour, a hairline
   edge, no shadow. Re-defining the tokens on the card turns its type white
   without touching the markup (the inline colours in front-page.php use
   them). */
.mxd-testimonials-card {
  --base: #07070d;
  --t-bright: #ffffff;
  --t-medium: #c4c9e0;
  --t-muted: #7d86a3;
  --accent: #2f55ff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: #07070d;
}
.mxd-testimonials-card__quote svg {
  fill: #2f55ff;
}

/* ------------------------------------------------*/
/* White-section graphics                           */
/* ------------------------------------------------*/
/* One plain pattern behind the white gradient bands: a light dot grid in
   brand blue at low opacity, masked so it fades out from one corner and
   never reaches the text. Pure CSS; ::before sits at z-index -1 inside the
   section's own stacking context (.sec-white is isolation: isolate) and
   ignores pointer events. */
#work.sec-white::before,
#capabilities.sec-white::before,
#reviews.sec-white::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* shared motifs, as custom properties so each section can mix them */
:root {
  --gfx-dots: radial-gradient(
    circle,
    rgba(0, 43, 186, 0.28) 1.3px,
    transparent 1.8px
  );
}

/* Flagship products: dot grid fading in from the top-right */
#work.sec-white::before {
  background-image: var(--gfx-dots);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 55% at 100% 0%,
    #000 0%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 60% 55% at 100% 0%,
    #000 0%,
    transparent 72%
  );
}

/* Capabilities: the same plain dots, anchored bottom-right */
#capabilities.sec-white::before {
  background-image: var(--gfx-dots);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(
    ellipse 55% 45% at 100% 100%,
    #000 0%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 55% 45% at 100% 100%,
    #000 0%,
    transparent 72%
  );
}

/* Reviews: dot field fading in from the top centre */
#reviews.sec-white::before {
  background-image: var(--gfx-dots);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(
    ellipse 55% 50% at 50% 0%,
    #000 0%,
    transparent 74%
  );
  mask-image: radial-gradient(
    ellipse 55% 50% at 50% 0%,
    #000 0%,
    transparent 74%
  );
}

/* ------------------------------------------------*/
/* Portfolio cards (template-parts/portfolio-card.php) */
/* ------------------------------------------------*/
/* The image is shown clean, with nothing laid over it. Category, title and
   tags sit in a solid caption panel underneath, with a round arrow button on
   the right. Flat colours, square corners, no shadows. Used by the homepage
   "flagship products" grid and the Case Studies page. */
.dk-pgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  padding: 0 3rem 6rem;
}
@media only screen and (min-width: 640px) {
  .dk-pgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1000px) {
  .dk-pgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2.4rem;
  }
}
.dk-pcard[hidden] {
  display: none;
}

.dk-pcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid #dde2f0;
  color: #0a0a0a;
  transition: border-color var(--_animspeed-medium) ease;
}

/* image: every card gets the same 3:2 frame. object-fit: contain means an
   image of another shape is letterboxed on the tint, never cropped or
   stretched. */
.dk-pcard__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: #eef1ff;
}
.dk-pcard__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* caption panel */
.dk-pcard__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex: 1;
  padding: 2.4rem 2.4rem 2.6rem;
}
.dk-pcard__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.dk-pcard__cat {
  font: normal 600 1.2rem/1.2 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: #002bba;
}
.dk-pcard__title {
  margin: 0;
  font: normal 800 2.8rem/1.1 var(--_font-default);
  letter-spacing: -0.08rem;
  color: #0a0a0a;
  overflow-wrap: anywhere;
  transition: color var(--_animspeed-medium) ease;
}
.dk-pcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.dk-pcard__tag {
  padding: 0.6rem 1.1rem;
  border: 1px solid #cfd6ee;
  border-radius: 99rem;
  font: normal 500 1.1rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  color: #4a5163;
  white-space: nowrap;
}

/* round arrow button: swaps its arrow on hover */
.dk-pcard__arrow {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border-radius: 50%;
  background: #07070d;
  color: #ffffff;
  transition: background var(--_animspeed-medium) ease;
}
.dk-pcard__arrow svg {
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.dk-pcard__arrow-b {
  transform: translate(-220%, 220%);
}

/* hover (pointer devices): the image zooms, the frame and title turn brand
   blue, the arrow button fills blue and its arrow is swapped for a fresh one */
.no-touch .dk-pcard__link:hover,
.dk-pcard__link:focus-visible {
  border-color: #002bba;
}
.no-touch .dk-pcard__link:hover .dk-pcard__img {
  transform: scale(1.05);
}
.no-touch .dk-pcard__link:hover .dk-pcard__title {
  color: #002bba;
}
.no-touch .dk-pcard__link:hover .dk-pcard__arrow {
  background: #002bba;
}
.no-touch .dk-pcard__link:hover .dk-pcard__arrow-a {
  transform: translate(220%, -220%);
}
.no-touch .dk-pcard__link:hover .dk-pcard__arrow-b {
  transform: translate(0, 0);
}
.dk-pcard__link:focus-visible {
  outline: 3px solid #7c4dff;
  outline-offset: 3px;
}

@media only screen and (max-width: 479px) {
  .dk-pcard__body {
    padding: 2rem;
  }
  .dk-pcard__title {
    font-size: 2.4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dk-pcard__link,
  .dk-pcard__img,
  .dk-pcard__title,
  .dk-pcard__arrow,
  .dk-pcard__arrow svg {
    transition: none;
  }
}

/* ------------------------------------------------*/
/* Footer                                           */
/* ------------------------------------------------*/
/* Compact three-part footer: brand + call to action, a two-column link
   list, and contact. Replaces the old tall single-column list and the two
   mostly empty columns. */
.dk-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
  padding: 9rem 0 8rem;
}
@media only screen and (min-width: 768px) {
  .dk-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 6rem 5rem;
  }
  .dk-footer__brand {
    grid-column: 1 / -1;
  }
}
@media only screen and (min-width: 1100px) {
  .dk-footer__main {
    grid-template-columns: 1.35fr 1.2fr 1fr;
    gap: 8rem;
    padding: 12rem 0 10rem;
  }
  .dk-footer__brand {
    grid-column: auto;
  }
}

.dk-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
}
.dk-footer__logo {
  display: block;
  width: 20rem;
}
.dk-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.dk-footer__pitch {
  max-width: 38rem;
  margin: 0;
  font: normal 500 2.2rem/1.35 var(--_font-default);
  letter-spacing: -0.05rem;
  color: var(--t-bright);
}

.dk-footer__title {
  margin: 0 0 3.2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--st-medium);
}
.dk-footer__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media only screen and (min-width: 560px) {
  .dk-footer__list--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 4rem;
  }
}
.dk-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font: normal 600 2rem/1.25 var(--_font-default);
  letter-spacing: -0.05rem;
  color: var(--t-bright);
  transition: color var(--_animspeed-medium) ease;
}
.dk-footer__list a:hover {
  color: var(--accent);
}
.dk-footer__social i {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
}
.dk-footer__social svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.dk-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
  padding: 3.6rem 0 4.4rem;
  border-top: 1px solid var(--st-medium);
}
.dk-footer__bar .footer-data {
  margin: 0;
}

/* Tighten the oversized wordmark block now that the columns above are short. */
.dk-footer .mxd-footer__fw-mark {
  padding: 0;
}
.dk-footer .mxd-block {
  margin: 0;
  padding: 0 0 6rem;
}
.dk-footer .mxd-container {
  padding-left: 3rem;
  padding-right: 3rem;
}
@media only screen and (min-width: 768px) {
  .dk-footer .mxd-container {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

/* Mobile menu: the wordmark at its desktop height (3.6rem) is ~245px wide
   and crowds the close button, so cap its width on small screens. */
@media only screen and (max-width: 767px) {
  .menu-logo__image {
    width: 16rem;
    max-width: 100%;
    height: auto;
  }
}

/* ------------------------------------------------*/
/* Hover effects                                    */
/* ------------------------------------------------*/
/* Primary buttons: a solid colour sweeps across from the left on hover
   (black on light sections, white on dark/blue ones), the label flips to
   match, and the icon box nudges. Flat colours, no shadows. */
.btn-default-accent,
.mxd-form-container .submit-btn {
  background-image: linear-gradient(#07070d, #07070d);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition:
    background-size 0.5s cubic-bezier(0.7, 0, 0.2, 1),
    border-color 0.5s ease,
    color 0.5s ease,
    transform var(--_animspeed-medium) var(--_animbezier);
}
.sec-dark .btn-default-accent,
.sec-blue .btn-default-accent {
  background-image: linear-gradient(#ffffff, #ffffff);
}
.no-touch .btn-default-accent:hover,
.no-touch .mxd-form-container .submit-btn:hover {
  background-size: 100% 100%;
  border-color: #07070d;
}
.no-touch .sec-dark .btn-default-accent:hover,
.no-touch .sec-blue .btn-default-accent:hover {
  border-color: #ffffff;
  color: #07070d;
}
.no-touch .sec-dark .btn-default-accent:hover i svg,
.no-touch .sec-blue .btn-default-accent:hover i svg {
  fill: #07070d;
}
.btn-default-accent .btn-icon {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.no-touch .btn-default-accent:hover .btn-icon {
  transform: translateX(0.3rem);
}

/* Case Studies filter chips: the border draws to brand blue (already) and
   the label colour follows. */
.mxd-cs-filter__btn {
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn-default-accent,
  .btn-default-accent .btn-icon {
    transition: none;
  }
}

/* ================================================*/
/* Moved from templates: homepage (front-page.php)  */
/* ================================================*/
/* LinkedIn (mxd-hero-03__socials) was removed from the hero - it now
   lives in the footer only. .mxd-hero-03__dataline is a
   justify-content:space-between flex row expecting two children, so
   with only .mxd-hero-03__controls left, centering the row keeps
   "Scroll to explore" in the middle instead of it collapsing to one
   edge. */
.mxd-hero-03__dataline {
  justify-content: center;
}
/* Hero graphic layer: with no video behind the headline anymore, the
   resting state was just text on flat --base. .mxd-hero-fx is a purely
   decorative, non-solid layer (hairline grid, a slowly animating
   accent glow, a few drifting crosshairs) for depth - everything here
   is a 1px stroke, a gradient, or low opacity, never a filled shape,
   so it reads as atmosphere rather than UI. It's the first child of
   .mxd-hero-03 so it paints behind the headline (position: relative,
   z-index:auto) and the absolute-positioned controls, all of which
   come later in the DOM. aria-hidden + pointer-events:none keep it out
   of the accessibility tree and the cursor/click layer. */
.mxd-hero-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mxd-hero-fx__grid {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    #000 0%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    #000 0%,
    transparent 78%
  );
}
.mxd-hero-fx__glow {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(900px, 90vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(124, 77, 255, 0.95) 0%,
    rgba(0, 43, 186, 0.55) 38%,
    transparent 70%
  );
  opacity: 0.5;
  filter: blur(16px);
  animation: mxd-hero-fx-glow 14s ease-in-out infinite;
}
@keyframes mxd-hero-fx-glow {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: blur(16px);
    opacity: 0.22;
  }
  50% {
    transform: translate(-44%, -56%) scale(1.2);
    filter: blur(22px);
    opacity: 0.34;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mxd-hero-fx__glow {
    animation: none;
  }
}
.mxd-hero-fx__mark {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  opacity: 0.4;
  animation: mxd-hero-fx-float 7s ease-in-out infinite;
}
.mxd-hero-fx__mark::before,
.mxd-hero-fx__mark::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
}
.mxd-hero-fx__mark::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}
.mxd-hero-fx__mark::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: 1px;
  transform: translateX(-50%);
}
.mxd-hero-fx__mark--1 {
  top: 22%;
  left: 12%;
}
.mxd-hero-fx__mark--2 {
  top: 68%;
  left: 87%;
  animation-duration: 8.5s;
  animation-delay: -3s;
}
.mxd-hero-fx__mark--3 {
  top: 80%;
  left: 20%;
  animation-duration: 6s;
  animation-delay: -1.5s;
}
@keyframes mxd-hero-fx-float {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.25;
  }
  50% {
    transform: translateY(-14px);
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mxd-hero-fx__mark {
    animation: none;
  }
}
@media only screen and (max-width: 767px) {
  .mxd-hero-fx__mark--1,
  .mxd-hero-fx__mark--3 {
    display: none;
  }
}
/* Light theme: the headline sat over a video in the original design, so
   it was white with mix-blend-mode: difference to stay readable on any
   frame. Over a white page that blend inverts the blue glow to olive, so
   use plain black text instead. */
.mxd-hero-03__headline a {
  mix-blend-mode: normal;
}
.mxd-hero-03__headline h1.permanent,
.mxd-hero-03__headline h1.permanent span {
  color: var(--t-bright);
}
/* "View all case studies": .mxd-projects-grid has no bottom margin of
   its own (spacing between .mxd-block siblings elsewhere in the theme
   comes from a margin-bottom modifier on the specific element, e.g.
   .mxd-section-title.pre-grid, not a generic block gap), so this needs
   its own top margin to sit clear of the grid above it. */
.mxd-work-viewall {
  margin-top: 0;
  text-align: center;
}
/* On mobile the default .btn-default-icon size (2rem type, 0.4rem
   0.4rem 0.4rem 2rem padding) makes "View all case studies" run
   nearly the full card width. Reusing main.css's own
   .btn-default-icon-small values here (rather than adding that class
   to the markup) keeps the button at full size on tablet/desktop,
   where it isn't cramped. */
@media only screen and (max-width: 767px) {
  .mxd-work-viewall .btn-default-icon {
    gap: 1.4rem;
    font-size: 1.5rem;
    padding: 0.4rem 0.4rem 0.4rem 1.4rem;
  }
  .mxd-work-viewall .btn-default-icon i {
    width: 3.4rem;
    height: 3.4rem;
  }
  .mxd-work-viewall .btn-default-icon i svg {
    width: 1.5rem;
  }
}
/* Contact form field/button styling lives in css/custom.css
   (targets the CF7 form's own .agency-contact-form template) -
   this stays scoped to this template's two-column layout only. */
.mxd-contact-form__intro {
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--t-medium);
}
@media only screen and (min-width: 992px) {
  .mxd-contact-form__intro {
    padding-right: 4rem;
  }
}

/* ================================================*/
/* Moved from templates: Case Studies page          */
/* ================================================*/
/* Website/Web App filter: solid pill toggles - white chip / accent
   text at rest, the chip inverts to a solid accent fill with white
   text when active, so which filter is on never depends on a subtle
   color shift alone. JetBrains Mono (--_font-accent) matches the face
   the theme already uses for buttons and the "W/01" section numbers.
   --nl-white/--accent are used directly (not the theme's light/dark
   text tokens) because the chip is meant to read as a solid white
   surface in both themes, the same way the accent-filled buttons
   elsewhere on the site (e.g. .btn-default-accent) commit to a fixed
   contrast pair rather than adapting per theme. */
.mxd-cs-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 5.6rem;
}
.mxd-cs-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
  border: none;
  border-radius: 0;
  padding: 1.3rem 2.2rem;
  background: var(--nl-white);
  color: var(--accent);
  font: normal 600 1.3rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  border: 1px solid #d3d9ec;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.mxd-cs-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  padding: 0.2rem 0.7rem;
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 1.1rem;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.mxd-cs-filter__btn.is-active {
  background: var(--accent);
  color: var(--nl-white);
  border-color: var(--accent);
}
.mxd-cs-filter__btn.is-active .mxd-cs-filter__count {
  background: color-mix(in srgb, var(--nl-white) 25%, transparent);
  color: var(--nl-white);
}
.no-touch .mxd-cs-filter__btn:not(.is-active):hover {
  border-color: var(--accent);
}
.no-touch .mxd-cs-filter__btn.is-active:hover {
  transform: translateY(-2px);
}
@media only screen and (min-width: 768px) {
  .mxd-cs-filter__btn {
    font-size: 1.4rem;
    padding: 1.4rem 2.4rem;
  }
}
.mxd-project-item[hidden] {
  display: none;
}

/* ================================================*/
/* Moved from templates: single case study          */
/* (scoped to .single-digikons_work)                */
/* ================================================*/
/* Case-study Overview lead paragraph: bigger than the standard .manifest-s
   body copy (used elsewhere on this page, incl. the testimonial) so it
   reads as a hero statement, but well under .manifest-l - that scales up
   to 7.5rem and, combined with a multi-sentence paragraph, produces
   enough wrapped lines to visibly desync the .mxd-split-lines scroll
   reveal (GSAP SplitText mid-transition) while scrolling past it. */
.single-digikons_work .manifest.manifest-project {
  font-size: 2.2rem;
}
@media only screen and (min-width: 768px) {
  .single-digikons_work .manifest.manifest-project {
    font-size: 2.6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .single-digikons_work .manifest.manifest-project {
    font-size: 3.4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .single-digikons_work .manifest.manifest-project {
    font-size: 4rem;
  }
}

/* Project title: main.css's h1.large is sized (up to 15rem) and set to
   white-space: nowrap for a short one-word demo title ("Azurio"). Real
   project titles here vary a lot in length - a long one like "Image Alt
   & Filename Generator" runs off the column at that size and gets
   clipped by the headline's own overflow. h1.large is scoped to the case-study
   page here (.single-digikons_work), so it's safe to give it a size that actually wraps. Below
   768px there's no main.css font-size for h1.large at all, so it falls
   back to plain h1's 6rem - too large for a long title on a narrow
   screen, hence the explicit smaller size here (mobile only; the
   768px+ rules below already set their own larger sizes). */
.single-digikons_work h1.large {
  white-space: normal;
  overflow-wrap: break-word;
  font-size: 4.4rem;
}
@media only screen and (min-width: 768px) {
  .single-digikons_work h1.large {
    font-size: 5.5rem;
    white-space: normal;
  }
}
@media only screen and (min-width: 1200px) {
  .single-digikons_work h1.large {
    font-size: 6.5rem;
  }
}
@media only screen and (min-width: 1400px) {
  .single-digikons_work h1.large {
    font-size: 7.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .single-digikons_work h1.large {
    font-size: 8rem;
  }
}

/* Hero / mid-page divider images: same Ukiyo.js issue as the next-project
   preview below - the "parallax-img" class hands the <img> to Ukiyo,
   which force-covers + crops it via inline styles that no CSS override
   on the <img> itself can beat. This template drops that class on both
   divider images (see markup) and lets them size by their own natural
   ratio instead: full width, height following the image, no crop.
   .mxd-divider and .mxd-divider__image are shared with the homepage's
   own divider, but this <style> block only ever renders on this
   template, so it can't affect that. */
.single-digikons_work .mxd-divider {
  height: auto;
}
.single-digikons_work .mxd-divider__image {
  height: auto;
}
.single-digikons_work .mxd-divider__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Next-project preview: main.css's .mxd-next-prj__media is a fixed-height
   flex box built for a full-bleed hero photo, and the "parallax-img-small"
   class hands the <img> to Ukiyo.js, which force-covers + crops it (and
   keeps re-applying that via inline styles, so no CSS override on the
   <img> itself can win). The next-project shot here is a portrait product
   mockup, not a landscape hero photo, so this template drops the parallax
   class on that image (see markup below) and sizes it by its own natural
   ratio instead: full width, height following the image, no crop.
   .mxd-next-prj__* is only used on this template, so this is safe. */
.single-digikons_work .mxd-next-prj__media {
  height: auto;
}
.single-digikons_work .mxd-next-prj__image {
  height: auto;
}
.single-digikons_work .mxd-next-prj__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ================================================*/
/* Moved from templates: inline style attributes    */
/* ================================================*/
/* Testimonial cards (homepage grid + mobile slider) */
.mxd-testimonials-card {
  justify-content: flex-start;
}
.mxd-testimonials-card__descr {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.6;
  color: var(--t-medium);
}
.mxd-testimonials-card__author {
  margin-top: auto;
}
/* Initials avatar */
.mxd-testimonials-card__photo.round {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2f55ff;
  color: #fff;
  font: normal 700 1.8rem/1 var(--_font-default);
}
/* FAQ answers */
.mxd-accordion__content p {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--t-medium);
}
/* index.php fallback template */
.dk-fallback {
  padding: 15rem 3rem;
}

/* ------------------------------------------------*/
/* Inner pages: Case Studies, single case study, blog */
/* ------------------------------------------------*/
/* One continuous gradient and one continuous dot pattern for the white area
   under the dark headline band. Nothing is tiled or repeated, so there is no
   seam at any page length: the glows are placed by percentage of the page
   height (violet top-right, blue left, violet right, blue left again), over
   a smooth white-to-periwinkle fade. The dot grid is masked by the same
   percentage positions, so each dotted patch sits exactly on a glow. */
.inner-page-content {
  isolation: isolate;
  background-color: #f4f6ff;
  background-image:
    radial-gradient(
      55% 14% at 100% 4%,
      rgba(99, 102, 255, 0.22) 0%,
      rgba(99, 102, 255, 0) 100%
    ),
    radial-gradient(
      50% 14% at 0% 30%,
      rgba(0, 43, 186, 0.15) 0%,
      rgba(0, 43, 186, 0) 100%
    ),
    radial-gradient(
      55% 14% at 100% 58%,
      rgba(99, 102, 255, 0.18) 0%,
      rgba(99, 102, 255, 0) 100%
    ),
    radial-gradient(
      50% 14% at 0% 88%,
      rgba(0, 43, 186, 0.15) 0%,
      rgba(0, 43, 186, 0) 100%
    ),
    linear-gradient(180deg, #ffffff 0%, #f4f6ff 45%, #e9edff 100%);
}
.inner-page-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--gfx-dots);
  background-size: 30px 30px;
  -webkit-mask-image:
    radial-gradient(ellipse 58% 14% at 100% 4%, #000 0%, transparent 100%),
    radial-gradient(ellipse 52% 14% at 0% 30%, #000 0%, transparent 100%),
    radial-gradient(ellipse 58% 14% at 100% 58%, #000 0%, transparent 100%),
    radial-gradient(ellipse 52% 14% at 0% 88%, #000 0%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 58% 14% at 100% 4%, #000 0%, transparent 100%),
    radial-gradient(ellipse 52% 14% at 0% 30%, #000 0%, transparent 100%),
    radial-gradient(ellipse 58% 14% at 100% 58%, #000 0%, transparent 100%),
    radial-gradient(ellipse 52% 14% at 0% 88%, #000 0%, transparent 100%);
}

/* ------------------------------------------------*/
/* Buttons: square corners                          */
/* ------------------------------------------------*/
/* No button has rounded corners. main.css gives .btn-default-icon (and its
   -small variant and their icon boxes) a 0.2-0.4rem radius, and browsers
   round native buttons; this resets them all. The portfolio card's round
   arrow badge is a design element, not a button style, and is left as is. */
.btn,
.btn-default-icon,
.btn-default-icon-small,
.btn-default-icon i,
.btn-default-icon-small i,
.btn .btn-icon,
.btn-round,
.mxd-cs-filter__btn,
.mxd-form-container .submit-btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 0;
}

/* ------------------------------------------------*/
/* Mobile side gutters: 20px (2rem)                 */
/* ------------------------------------------------*/
/* Below 768px every section's left/right gutter is 2rem instead of 3rem.
   (html is 62.5%, so 1rem = 10px.) The gutter comes from several places:
   the grid items, the fixed header and menu button, the hero blocks, the
   call-to-action band, the project grid and the footer. */
@media only screen and (max-width: 767px) {
  .mxd-grid-item,
  .mxd-container:not(.grid-l-container):not(.fullwidth-container) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .mxd-header {
    left: 2rem;
    width: calc(100% - 9.5rem);
  }
  .mxd-menu__contain {
    right: 2rem;
  }
  .mxd-menu__logo {
    left: 2rem;
  }
  .mxd-menu__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .mxd-hero-03__headline,
  .mxd-hero-03__control-left,
  .mxd-hero-03__control-right,
  .mxd-promo__content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .dk-pgrid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .dk-footer .mxd-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .dk-fallback {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}