/* HubSpot */
.hbspt-form form input[type="checkbox"] {
	margin-right: 0.5rem;
}
.hs-form-checkbox, fieldset ul li, .hs_error_rollup ul li {
	list-style-type: none;
	width: 100% !important;
}
.hbspt-form form .hs-submit{
	margin-top: 1.5rem;
}

/* Start Contact Page Form / HubSpot */
fieldset>.hs_company .hs-input, fieldset>.hs_message .hs-input, fieldset>.hs_phone input.hs-input, fieldset>.hs_email .hs-input {
	width: 100% !important;
}
form.hs-form-private fieldset>div{
	margin-bottom:10px;
}
fieldset>.hs_interest label span{
	text-transform: capitalize;
}
fieldset>.hs_interest div.input ul li {
	border: 1px solid #f0f5fa;
	border-radius: 4px;
	padding: 6px 14px;
}
fieldset>.hs_interest div.input ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
fieldset>[class^="hs_"] ul, .hs_error_rollup ul{
	margin:0;
	padding:0;
}
fieldset>[class^="hs_"]>div.input{
	margin-top:2px;
	margin-right:0px;
}
fieldset>[class^="hs_"] ul li label.hs-error-msg, span.hs-form-required, .hs_error_rollup ul li label{
	color: red;
	margin:0;
}
fieldset .hs_phone select, fieldset>.hs_gclid, fieldset>.hs_last_keywords, fieldset>.hs_cookie_utm_term, fieldset>[class^="hs_utm_"], fieldset>.hs_referral_email, fieldset>.hs_msclkid {
	display: none;
}
form[id^="hsForm_"] fieldset{
	max-width:100%;
}
div.hs_submit input.hs-button {
	width: 100%;
  	border-radius: 8px;
}
/* End Contact Page Form / HubSpot */

/* Main Footer */
/* .ast-builder-grid-row-5-equal .ast-builder-grid-row {
	grid-template-columns: repeat(5, 1fr);
}
 */
.widget_custom_html {
	/* display: flex;
	justify-content: center;
	margin: 0 10px; */
}
div.footer-description{
	margin-top: 14px;
}
div.footer-social-icons img{
	width: 24px;
	height: auto;
	margin: 0 4px;
}
div.footer-list-header{
	margin-bottom: 14px;
}
ul.footer-list{
	margin-bottom: 18px;
}

/* Above header, Top header, Secondary menu */
.ast-above-header-bar .ast-builder-grid-row.ast-grid-center-col-layout-only .ast-grid-section-center{
    flex-grow: inherit;
}
.ast-header-break-point .main-navigation ul .menu-item .menu-link{
	padding: 0 1em;
}

/* Menu buttons ask Milo.  */

.header-contact-btn{
	padding: 8px 16px;
	border-radius: 7px;
	width: 112px;
	font-size: 1rem;
}
.ast-mobile-header-content .ast-header-html-1,
.ast-header-html-1 .ast-builder-html-element{
	display: flex;
	gap: 14px;
	justify-content:center;
}
.ask-milo-btn-wrap,
.ask-milo-btn {
	cursor: pointer;
	line-height: normal;
}
.ghost-ask-milo-cta,
.filled-ask-milo-cta {
	width: clamp(110px, 10vw, 125px);
	transition: opacity 0.15s ease;
}
.filled-ask-milo-cta,
.ask-milo-btn:hover .ghost-ask-milo-cta {
	display:none;
}
.ask-milo-btn:hover .filled-ask-milo-cta {
	display:block;
}

/* Search Full Screen */
.ast-search-box.full-screen .ast-search-wrapper {
    top: 30%;
}


@media screen and (min-width: 922px) and (max-width: 1190px) {
	.ast-desktop .ast-primary-header-bar.main-header-bar{
		padding:0 2%;
	}
	.ast-logo-title-inline .site-logo-img{
		padding: 0;
	}
	header .custom-logo-link img,
	.ast-sticky-main-shrink #masthead .ast-sticky-shrunk .site-logo-img img{
		width: clamp(140px, 15vw, 192px);
	}
	.site-header-section>* {
    	padding: 0 7px;
	}
	.ast-icon.icon-arrow svg {
		margin-left: 7px;
	}
	.header-contact-btn{
		font-size: 0.9rem;
		padding: 7px 10px;
		border-radius: 7px;
		width: 92px;
		
	}
}
@media screen and (min-width: 922px) and (max-width: 1000px) {
	.ast-builder-menu-1 .menu-item > .menu-link{
		padding: 0 7px;
	}
	.ast-builder-menu-1 .menu-item > .menu-link .menu-text {
		font-size: 14px;
	}
}

.single.single-brand .ast-article-single figure,
.single.single-brand .ast-article-single img:not(figure img) {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}


/* CSS by Piyush End */


.footer-phone-btn a {
	padding:14px;
}

/* copyright */
.ast-footer-button-1{
	width: auto !important;
	min-width: 230px;
}

/*  Footer widget*/
.ast-builder-footer-grid-columns 
.site-footer-section:nth-child(2) 
aside.footer-widget-area-inner {
  margin-left:46px;
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
    max-width: 100% ;
}
.ast-footer-button-1[data-section*="section-fb-button-"] .ast-builder-button-wrap .ast-custom-button {
    margin-left: 0px;
}
@media only screen and (max-width: 800px) {
	div.footer-social-icons img {
    width: 16px;
    height: auto;
    margin: 0 2px;
}
  .ast-builder-footer-grid-columns 
  .site-footer-section:nth-child(2) 
  aside.footer-widget-area-inner {
    margin-left: 10px !important;
  }
	.widget_custom_html {
    justify-content: flex-start;
}
	div.footer-description p {
    font-size: 12px;
}
	.footer-phone-btn a {
    padding: 7px;
}
	li.footer-list-item {
    font-size: 12px;
}
	.ast-footer-copyright p {
    text-align: center !important;
}
	.ast-footer-button-1[data-section*="section-fb-button-"] .ast-builder-button-wrap .ast-custom-button {
    margin-left: 0px;
}
}
@media only screen and (max-width: 460px) {
  .ast-builder-footer-grid-columns 
  .site-footer-section:nth-child(2) 
  aside.footer-widget-area-inner {
    margin-left: 0px !important;
  }
	div.footer-social-icons img {
    width: 29px;
    height: auto;
    margin: 13px 8px;
}
	.footer-list-header {
    font-size: 19px;
}
		li.footer-list-item {
    font-size: 18px;
}
	.footer-phone-btn {
    text-align: center;
}
	.footer-social-icons {
    text-align: center;
}
	.footer-phone-btn {
	margin-bottom: 8px !important;
    margin-top: 21px !important;
	}
}


.single-genially .entry-meta,
.single-genially .ast-author-details,
.single-genially .posted-on,
.single-genially .post-author {
    display: none;
}


.single-landing_page .entry-meta,
.single-landing_page .ast-author-details,
.single-landing_page .posted-on,
.single-landing_page .post-author {
    display: none;
}

@media (max-width: 781px) {
  .mobile-center .wp-block-buttons {
    justify-content: center;
  }
  .mobile-center h2.wp-block-heading {
    text-align: center;
  }
  .mobile-center > .wp-block-heading + p {
    text-align: center;
  }
}

.ask-milo-cta {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.ask-milo-cta svg {
  width: 128px;
  height: auto;
  display: block;
}
.ask-milo-cta:hover svg,
.ask-milo-cta:focus-visible svg {
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.ask-milo-cta:focus-visible {
  outline: 2px solid #4568DC;
  outline-offset: 2px;
}

.ast-header-html .ask-milo-cta,
.ast-builder-html-element p {
  margin: 0;
}
.ast-header-html-1 .ast-builder-html-element,
.ast-header-html-1 .ast-builder-html-element p {
  display: flex;
  align-items: center;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   Miles IT — FAQ Accordion (Clean Cards)
   Paste into:  Appearance → Customize → Additional CSS
   (or your child theme's stylesheet).

   This is the only custom CSS the redesign needs. Everything else —
   card surface, 1px border, 14px radius, padding, gaps, heading size —
   is set with native block attributes in accordion-blocks.html.

   Two things WordPress does NOT expose as block attributes, handled here:
     1. The open-state look (blue border + soft shadow)
     2. Replacing the default ▸ triangle with a + / − indicator
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Card: smooth open/close + open-state highlight ----------------------- */
.miles-faq .wp-block-cover.miles-faq__item {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.miles-faq .wp-block-cover.miles-faq__item:has(details[open]) {
  border-color: #004AA0 !important;                 /* blue border when open */
  box-shadow: 0 10px 25px -6px rgba(0, 74, 160, 0.18);
}

/* --- Summary row: question left, indicator right; hide native triangle ---- */
.miles-faq details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}
.miles-faq details > summary::-webkit-details-marker { display: none; }
.miles-faq details > summary::marker { content: ""; }

/* --- + / − indicator, drawn from two bars (no image/icon font) ------------ */
/* Two background layers (vertical + horizontal bar = plus). The vertical bar's
   height is animated to 0 via background-size, which IS animatable — so it
   morphs smoothly from + to − on the frontend. */
.miles-faq details > summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-image:
    linear-gradient(#004AA0, #004AA0),   /* vertical bar */
    linear-gradient(#004AA0, #004AA0);   /* horizontal bar */
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 2.5px 100%, 100% 2.5px;
  transition: background-size 0.3s ease, transform 0.3s ease;
}
.miles-faq details[open] > summary::after {
  /* collapse the vertical bar to height 0 → minus, with a quarter spin */
  background-size: 2.5px 0, 100% 2.5px;
  transform: rotate(180deg);
}

/* --- Optional: prevent the sideways jump from the scrollbar appearing ----- */
/* html { scrollbar-gutter: stable; } */

@media (prefers-reduced-motion: reduce) {
  .miles-faq .wp-block-cover.miles-faq__item,
  .miles-faq details > summary::after { transition: none; }
}

/* ── CLS fix v2: metric-matched fallback fonts ───────────────────────
   Fallbacks sized to match Titillium Web and Lato so the swap from
   fallback → web font produces no layout shift.

   ★ INTERIM LOCATION — this block is slated to move to the child theme
   stylesheet (astra-child/style.css). When a dev completes that SFTP
   transfer, DELETE this block from Additional CSS the same day so two
   copies never run together.

   v2 (Jul 10, 2026): override values regenerated from actual font
   metric tables (@capsizecss/metrics) instead of the June estimates.
   The Lato size-adjust correction (98% → 97.69%) is the one that
   matters for paragraph-heavy templates: horizontal width controls
   line wrapping, which Astra's explicit line-heights don't neutralize.
   Also added local("Liberation Sans") as a second source — PSI's
   Linux test environment may lack Arial; Liberation Sans is
   metric-compatible with Arial, so the same overrides apply.

   DEPENDENCY NOTE: These values are tuned to Titillium Web (headings)
   and Lato (body) relative to an Arial-class local fallback. If either
   font is changed in Astra's typography settings, regenerate these
   (or remove the block). */

/* Fallback for Titillium Web (headings) */
@font-face {
  font-family: "Titillium Web Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 94.44%;
  ascent-override: 119.97%;
  descent-override: 41.09%;
  line-gap-override: 0%;
}

/* Fallback for Lato (body) */
@font-face {
  font-family: "Lato Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 97.69%;
  ascent-override: 101.03%;
  descent-override: 21.80%;
  line-gap-override: 0%;
}

/* Insert the fallbacks ahead of the system generics in Astra's stacks */
body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
  font-family: "Lato", "Lato Fallback", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4, h5, h6),
.site-title,
.site-title a {
  font-family: "Titillium Web", "Titillium Web Fallback", sans-serif;
}

@media (max-width: 781px) {
    /* Container governs all native blocks inside it */
    .mobile-center,
    .mobile-center :where(.wp-block-heading, p, .wp-block-buttons) {
        text-align: center;
    }
    .mobile-center .wp-block-buttons {
        justify-content: center;
    }

    /* Custom HTML opts out — its content is hand-managed */
    .mobile-center .wp-block-html,
    .mobile-center .wp-block-html * {
        text-align: revert;
    }
}


/* Case study  */

header.entry-header {
    display: none;
}

.ast-single-post.ast-page-builder-template .site-main > article, .ast-page-builder-template .post-navigation {
	padding:0px !important;
	
}

.single-case-study .ast-article-single figure,
.single-case-study .ast-article-single img:not(figure img) {
    box-shadow: none;
}

/* Kill the gap between full-bleed sections */
.single-case-study .entry-content[data-ast-blocks-layout] > * {
    margin-bottom: 0;
}

/* Remove Astra's default 3em padding on top-level sections */
.single-case-study .entry-content > .wp-block-cover,
.single-case-study .entry-content > .wp-block-group,
.single-case-study .entry-content > .wp-block-columns {
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CAROUSEL BLOCK PLUGIN (cb-carousel-v2 / Swiper-based)
   ───────────────────────────────────────────────────────────────────
   All rules below apply ONLY to carousels built with the Carousel
   Block plugin. Every selector is scoped under .wp-block-cb-carousel-v2,
   the wrapper class the plugin stamps on every carousel it renders —
   sitewide, any instance, current or future. Cannot affect anything
   else (static Columns card rows have their own card-row CSS).

   REQUIRED SLIDE STRUCTURE (build standard):
     Slide → Stack (card: bg/border/padding, vertical flex,
                    Space Between) → [ content Stack, Buttons ]
   Card styling lives on the outer Stack, NOT on a Columns wrapper.
   Do NOT set Minimum Height on either Stack — with stretched slides,
   min-height:100% starves the buttons of room and (combined with
   WP's global flex-wrap:wrap) wraps them sideways out of the card.

   Card style note: carousel cards use a 1px border, NO box-shadow.
   If a shadow is ever reintroduced, Swiper's overflow:hidden will
   clip it — the padding/negative-margin fix must be restored
   (see decision log).
   ═══════════════════════════════════════════════════════════════════ */

/* 1. EQUAL-HEIGHT SLIDES
      Two conditions must both hold for slides to stretch to the
      tallest sibling: the wrapper must align-items:stretch, and
      slide height must be auto (Swiper's height:100% resolves
      against an indefinite wrapper height and shrink-wraps instead).
      !important guards against the plugin stylesheet winning the
      cascade on either property. */
.wp-block-cb-carousel-v2 .swiper-wrapper {
    align-items: stretch;
}
.wp-block-cb-carousel-v2 .swiper-slide {
    height: auto !important;
    display: flex;
}

/* 2. CARD FILLS SLIDE
      The card Stack grows to the slide's full stretched height.
      display/flex-direction restated deliberately (generated
      per-container CSS has proven unreliable — do not remove as
      "redundant"). flex-wrap:nowrap overrides WP's global
      .is-layout-flex { flex-wrap:wrap }, which in a COLUMN container
      wraps overflowing children into a new column to the RIGHT —
      the "escaped pill" bug. Never allow wrap inside the card. */
.wp-block-cb-carousel-v2 .swiper-slide > .wp-block-group {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* 3. CTA PINNED TO CARD BOTTOM
      Backstop for the Stack's Space Between setting.
      margin-top:auto pins the buttons regardless. */
.wp-block-cb-carousel-v2 .swiper-slide > .wp-block-group > .wp-block-buttons {
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--20);
}

/* 4. SEPARATOR WIDTH FIX
      Astra styles <hr> with `margin: 20px auto`. In a flex column,
      auto side-margins block cross-axis stretch, collapsing the empty
      <hr> to zero width (invisible line). Zero the side margins so
      the separator fills the card. */
.wp-block-cb-carousel-v2 .swiper-slide .wp-block-group .wp-block-separator {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* 5. HIDE PREV/NEXT ARROWS ON MOBILE
      Below the 1-slide breakpoint, swipe + pagination bullets are
      the interaction; arrows are redundant and crowd the layout. */
@media (max-width: 767.98px) {
    .wp-block-cb-carousel-v2 .cb-button-prev,
    .wp-block-cb-carousel-v2 .cb-button-next {
        display: none;
    }
}

/* ─────────────────── END CAROUSEL BLOCK PLUGIN ─────────────────── */

}
@media (max-width: 768px) {
  .site-footer .ast-builder-grid-row {
    grid-template-columns: 100%;
  }
}

.ast-container {
    max-width: 100% !important;
    padding: 0;
}

.entry-content[data-ast-blocks-layout] > * {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

/* ── card-row.align-rows: sync title / image / text rows across
   sibling cards using CSS grid + subgrid. The title row grows to
   the tallest heading in the row, so images start on the same line.
   Scope: Columns blocks carrying BOTH classes card-row + align-rows
   (currently only the 12-beliefs pattern). Requires exactly 3 direct
   children per column — wrap multiple paragraphs in a Group.
   Desktop only; below 782px, mobile stacking reverts to default.
   Editor shows ragged titles — front-end only, expected.
   ★ INTERIM: move to astra-child/style.css at next SFTP session. */
@media (min-width: 782px) {
    .wp-block-columns.card-row.align-rows {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        row-gap: 0;
    }
    .card-row.align-rows > .wp-block-column {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
    }
    /* Constrained layout's auto side-margins make grid items
       shrink-wrap + center; full width restores left alignment */
    .card-row.align-rows > .wp-block-column > * {
        width: 100%;
    }
}

/* Csae Studies Section */
#miles-case-studies {
  --miles-black: #161E2E;
  --miles-dark-blue: #002C68;
  --miles-blue: #004AA0;
  --miles-blue-120: #00316B;
  --miles-light-blue-75: #CEE4FF;
  --miles-gray: #515252;
  --miles-light-gray: #DBDBDB;
  --miles-black-90: #3D4451;
  --miles-black-70: #8A8E97;
  --miles-black-20: #EFF0F1;
  --mcs-bg: #FAFBFD;
  --font-heading: "Titillium Web", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  font-family: var(--font-body);
  color: var(--miles-black);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

#miles-case-studies, #miles-case-studies *, #miles-case-studies *::before, #miles-case-studies *::after { box-sizing: border-box; }
#miles-case-studies a { text-decoration: none; }
#miles-case-studies :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,74,160,0.25); border-radius: 4px; }

/* ---- hero ---- */
#miles-case-studies .mcs-hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--miles-light-blue-75) 100%); }
#miles-case-studies .mcs-hero-inner { max-width: 1280px; margin: 0 auto; text-align: center; padding: 64px 24px 58px; }
#miles-case-studies .mcs-hero-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(38px, 6vw, 56px); letter-spacing: 0.02em; color: var(--miles-blue); margin: 0; line-height: 1.05; }
#miles-case-studies .mcs-hero-sub { font-family: var(--font-body); font-size: clamp(15px, 2.2vw, 18px); color: var(--miles-gray); margin: 16px auto 0; max-width: 560px; line-height: 1.55; }
@media (max-width: 640px) { #miles-case-studies .mcs-hero-inner { padding: 44px 20px 36px; } }

/* ---- main band ---- */
#miles-case-studies .mcs-main { background: var(--mcs-bg); padding: 36px 0 56px; }
#miles-case-studies .mcs-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { #miles-case-studies .mcs-container { padding: 0 16px; } #miles-case-studies .mcs-main { padding: 24px 0 40px; } }

/* ---- filter pills ---- */
#miles-case-studies .mcs-filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
#miles-case-studies .mcs-pill { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; background: #FFFFFF; color: var(--miles-black); border: 1px solid var(--miles-light-gray); padding: 8px 20px; border-radius: 100px; transition: color .12s, border-color .12s; }
#miles-case-studies .mcs-pill:hover { border-color: var(--miles-blue); color: var(--miles-blue); }
#miles-case-studies .mcs-pill--on { background: var(--miles-blue); color: #FFFFFF; border-color: var(--miles-blue); padding: 9px 20px; }
#miles-case-studies .mcs-pill--on:hover { color: #FFFFFF; border-color: var(--miles-blue); }
@media (max-width: 640px) { #miles-case-studies .mcs-filters { gap: 8px; margin-bottom: 28px; } #miles-case-studies .mcs-pill { font-size: 12px; padding: 7px 16px; } #miles-case-studies .mcs-pill--on { padding: 8px 16px; } }

/* ---- card grid ---- */
#miles-case-studies .mcs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { #miles-case-studies .mcs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { #miles-case-studies .mcs-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---- card ---- */
#miles-case-studies .mcs-card { background: #FFFFFF; border: 1px solid var(--miles-light-gray); border-radius: 10px; box-shadow: 0 2px 4px -2px rgba(0,0,0,0.10), 0 4px 6px -1px rgba(0,0,0,0.10); overflow: hidden; display: flex; flex-direction: column; }
#miles-case-studies .mcs-card-art { height: 160px; background: var(--miles-black-20); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#miles-case-studies .mcs-card-mono { font-family: var(--font-heading); font-weight: 700; font-size: 72px; color: var(--miles-black-90); letter-spacing: 0.02em; line-height: 1; }
#miles-case-studies .mcs-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
#miles-case-studies .mcs-chip { align-self: flex-start; font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--miles-black-90); background: var(--miles-black-20); padding: 4px 9px; border-radius: 4px; }
#miles-case-studies .mcs-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; letter-spacing: 0.01em; color: var(--miles-black); margin: 0; line-height: 1.25; }
#miles-case-studies .mcs-card-desc { font-family: var(--font-body); font-size: 14.5px; color: var(--miles-gray); margin: 0; line-height: 1.55; flex: 1; }
@media (max-width: 640px) {
  #miles-case-studies .mcs-card-art { height: 120px; }
  #miles-case-studies .mcs-card-mono { font-size: 52px; }
  #miles-case-studies .mcs-card-body { padding: 18px 18px 20px; gap: 10px; }
  #miles-case-studies .mcs-card-title { font-size: 19px; }
  #miles-case-studies .mcs-card-desc { font-size: 14px; }
}

/* ---- CTA button (brand morph on hover) ---- */
#miles-case-studies .mcs-btn { display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 15px; background: var(--miles-dark-blue); color: #FFFFFF; padding: 11px 22px; border-radius: 6px; margin-top: 6px; transition: background .2s, color .2s, border-radius .2s, transform .2s; transform: scale(1); }
#miles-case-studies .mcs-btn:hover { background: var(--miles-black); color: #FFFFFF; border-radius: 100px; transform: scale(1.03); }
#miles-case-studies .mcs-btn:active { transform: scale(0.99); }
@media (max-width: 640px) { #miles-case-studies .mcs-btn { padding: 12px 22px; } }

/* ---- pagination ---- */
#miles-case-studies .mcs-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 44px 0 4px; }
#miles-case-studies .mcs-page { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 6px; background: #FFFFFF; border: 1px solid var(--miles-light-gray); color: var(--miles-black); font-family: var(--font-heading); font-weight: 700; font-size: 15px; transition: color .12s, border-color .12s; }
#miles-case-studies .mcs-page:hover { border-color: var(--miles-blue); color: var(--miles-blue); }
#miles-case-studies .mcs-page--on { background: var(--miles-blue); color: #FFFFFF; border-color: var(--miles-blue); }
#miles-case-studies .mcs-page--on:hover { color: #FFFFFF; border-color: var(--miles-blue); }
#miles-case-studies .mcs-dots { font-family: var(--font-body); color: var(--miles-black-70); font-size: 15px; padding: 0 4px; }
#miles-case-studies .mcs-next { display: flex; align-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--miles-blue); padding: 0 10px; }
#miles-case-studies .mcs-next:hover { color: var(--miles-blue-120); text-decoration: underline; }
@media (max-width: 640px) { #miles-case-studies .mcs-pagination { padding: 32px 0 0; } #miles-case-studies .mcs-page { width: 40px; height: 40px; } }

/* Menu Striven */
.striven-menu-icon {
    padding: 40px 0px;
    justify-content: center;
    display: grid;
    position: relative;
    width: 100%;
    margin: 18px 0px;
}
.striven-menu-icon img {
    width: 100%;
    margin: 0 auto;
    max-height: 8vh;
    height: auto;
}
@media only screen and (max-width: 2860px) {
.striven-menu-icon.mob-none {
    display: grid !important;
}
	.striven-mob-menu-icon.desk-none {
	display:none !important;
}
}
@media only screen and (max-width: 860px) {
.striven-menu-icon.mob-none {
    display: none !important;
}
	.striven-mob-menu-icon.desk-none {
	display:block !important;
}
	.striven-mob-menu-icon {
    padding: 0px 40px;
	margin: 0px 0px;
}
	.ast-header-break-point .main-navigation ul .menu-item .menu-link {
    padding: 0 9px;
}
}
											
.striven-menu-icon a {
    margin-top: 20px;
}
li#menu-item-9160,
li#menu-item-8692 {
    background-color: #F0F5FA;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.megamenu-active .astra-megamenu>.menu-item, .ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:not([data-megamenu-trigger=click]):hover .astra-megamenu>.menu-item {
    font-size: 14px;
}
.ast-desktop .ast-mega-menu-enabled .ast-hide-menu-item+.ast-mm-custom-content {
    text-align: center;
    margin-top: .9em;
}
a.button.button-primary:hover {
color: #ffffff;
    background-color: #161e2e;
    border-color: #161e2e;	
	
}
.ast-footer-copyright a {
    color: #fff;
}



/* Cookie Bot */
@media screen and (min-width: 3080px) {
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
			display: none !important;
        width: 0px !important;
    }
}
div#CybotCookiebotDialog {
    padding: 6px !important;
}
@media screen and (min-width: 1280px) {
    #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
        align-items: center !important;
    }
}
  #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
        align-items: center !important;
    }
#CybotCookiebotDialogHeaderLogosWrapper {
    display: none !important;
    align-items: center;
    display: flex;
    flex: 1 1 0%;
    justify-content: space-between;
    width: 0px;
}
div#CybotCookiebotDialogHeader {
    width: 0px !important;
}
#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
    align-items: center;
    align-self: stretch;
    border: none;
    justify-content: space-between;
    padding: 0;
    width: 0 !important;
}
#CybotCookiebotDialogHeader {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}
  #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
			display: none !important;
		width : 0% !important;
		
}
.CybotCookiebotDialogBodyBottomWrapper {
    display: none !important;
}
 a#CybotCookiebotDialogPoweredbyCybot,
  div#CybotCookiebotDialogPoweredByText {
    display: none !important;
  }

  #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo {
    display: none !important; 
  }

/* Miles IT CTA button hover effect */
.miles-article .cta-line .contact-miles-it-btn:hover {
    background: #161e2e;
    color: #fff !important;
    transform: scale(1.03);
  }

/* ============================================================
   Hometown Hero service cards
   Homepage hero — four fully clickable service cards.
   Each card is ONE core/button block; the icon tile and the
   arrow are drawn with ::before and ::after, so the whole
   visible card is the link.
   Paired with the svc-card / svc-cards classes in the block markup.
   ============================================================ */

/* ---- the three values that control the card's proportions.
       Adjust these, not the rules below. ---- */
.svc-card {
  --svc-tile-size: 52px;   /* the grey rounded square */
  --svc-icon-size: 44px;   /* the illustration inside it */
  --svc-arrow-inset: 32px; /* space between the arrow and the card's right edge */
}

.svc-cards .wp-block-column { padding: 0; }
.svc-cards .wp-block-buttons { height: 100%; }

.svc-card { width: 100%; height: 100%; }

/* ---- the card ---- */
.svc-card > .wp-block-button__link {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 80px;
  box-sizing: border-box;
  padding: 14px var(--svc-arrow-inset) 14px 12px;
  background-color: #ffffff;
  color: #1a2b4a;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  border: 0;
  border-radius: 7px;
  box-shadow: var(--wp--preset--shadow--natural);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* ---- left icon tile (replaces the icon button) ---- */
.svc-card > .wp-block-button__link::before {
  content: "";
  flex: 0 0 var(--svc-tile-size);
  height: var(--svc-tile-size);
  background-color: #eff1ef;
  background-image: var(--svc-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--svc-icon-size) var(--svc-icon-size);
  border: 1px solid var(--wp--preset--color--ast-global-color-8);
  border-radius: 6px;
}

/* ---- right arrow (replaces the arrow button) ---- */
.svc-card > .wp-block-button__link::after {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  margin-left: auto;
  background-image: url(https://www.milesit.com/wp-content/uploads/2026/06/right-arrow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ---- hover, focus and press: the card lifts, nothing recolors.
       background-color and color are repeated here on purpose —
       without them Astra's own button hover rule fills the card dark. ---- */
.svc-card > .wp-block-button__link:hover,
.svc-card > .wp-block-button__link:focus,
.svc-card > .wp-block-button__link:focus-visible,
.svc-card > .wp-block-button__link:active {
  background-color: #ffffff;
  color: #1a2b4a;
  border: 0;
  box-shadow: 0 8px 20px rgba(0, 44, 105, .28);
  transform: translateY(-2px);
}

.svc-card > .wp-block-button__link:focus-visible {
  outline: 2px solid #002c69;
  outline-offset: 2px;
}

/* ---- per-card icon ---- */
.svc-card--managed   { --svc-icon: url(/wp-content/uploads/2026/06/managed-it-services-security.png); }
.svc-card--software  { --svc-icon: url(/wp-content/uploads/2026/06/software-development-code.png); }
.svc-card--web       { --svc-icon: url(/wp-content/uploads/2026/06/custom-web-development.png); }
.svc-card--marketing { --svc-icon: url(https://www.milesit.com/wp-content/uploads/2026/06/marketing-services.png); }

/* ---- mobile ---- */
@media (max-width: 781px) {
  .svc-card {
    --svc-tile-size: 48px;
    --svc-icon-size: 40px;
    --svc-arrow-inset: 24px;
  }
  .svc-card > .wp-block-button__link {
    font-size: 1rem;
    gap: 12px;
  }
}

/* ---- respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .svc-card > .wp-block-button__link { transition: none; }
  .svc-card > .wp-block-button__link:hover,
  .svc-card > .wp-block-button__link:focus,
  .svc-card > .wp-block-button__link:focus-visible,
  .svc-card > .wp-block-button__link:active { transform: none; }
}


a.wp-block-button__link.wp-element-button {
    box-shadow: 0px 2px 3px #0000007d !important;
}
a.wp-block-button__link.wp-element-button:hover {
    box-shadow: 0px 2px 3px #0000007d !important;
}