/**
 * Version:           1.0.0
 * Author:            Off the Lip
 * Author URI:        https://offthelip.com
 * Theme Name: McHale Design
 */

/* Fonts */

@font-face {
    font-family: 'Gotham HTF Black';
    src: url('fonts/GothamHTF-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham HTF Bold';
    src: url('fonts/GothamHTF-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham HTF Bold Condensed';
    src: url('fonts/GothamHTF-BoldCondensed.woff') format('woff');
    font-weight: bold;
    font-stretch: condensed;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham HTF Book';
    src: url('fonts/GothamHTF-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro Regular';
    src: url('fonts/MyriadPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Design tokens / CSS variables for brand colors */
:root {
    --mchale-grey: rgb(139, 139, 142);
    --mchale-orange: rgb(255, 105, 2);
    --mchale-light-orange: rgb(246, 139, 31);
}

/* General Styles */
body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: var(--mchale-grey);
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 1.6;
}
p  {
    max-width: 1100px;
    margin: 0 auto 16px;
    padding: 0 16px;
}
h2 {
    font-family: "proxima-nova-extra-condensed", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 75px;
    margin: 24px 0 16px;
    text-align: center;
    text-transform: uppercase
}
h3, .portfolio-tile .tile-desc {
    font-family: "proxima-nova-extra-condensed", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.5rem;
    text-align: center;
    text-transform: uppercase;
}
strong {
    font-weight: 500;
}
.btn-text {
    font-family: proxima-nova, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}
.btn-see {
    margin-top: 16px;
    padding: 10px 14px;
    border: 2px solid #FF6902;
    color: #FF6902;
    background: transparent;
    text-decoration: none;
    border-radius: 0;
    font-weight: 700;
}
.btn-see-icon { stroke: #FF6902; fill: #FF6902; }
.btn-see-text {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 1rem;
    margin-top: 2px;
}
.btn-see .trusted-triangle {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}
/* Header Styles */
header {
    background-color: #f8f9fa;
    padding: 0px;
    text-align: center;
    color: var(--mchale-grey);
    font-family: proxima-nova, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform:uppercase;
    font-size: 16px;
}
header .logo img {
    max-width: 350px;
    height: 28px;
}
header flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.nav-menu a {
    color: var(--mchale-grey);
    text-decoration: none;
    font-weight: bold;
}
.nav-menu a:hover {
    text-decoration: none;
    color: #FF6902;
}

/* Active nav link and icon styling */
.nav-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 6px 4px;
}

/* Active link color */
.nav-link.active {
    color: var(--mchale-orange);
    font-weight: 700;
}

/* Inline SVG arrow positioned under the active item */
.nav-item { position: relative; display: inline-block; }
.nav-down-arrow {
    position: absolute;
    left: 36%;
    transform: translateX(-50%);
    bottom: -10px;
    display: block;
}

@media (max-width: 900px) {
    .nav-down-arrow { display: none; }
}
.nav-menu li {
    display: inline;
    margin: 0;
}
.nav-menu ul {
    flex-direction: row;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
/* CTA button in header */
.cta-btn {
    height: 56px; /* default header height fallback */
    padding: 50px 18px;
    background: #FF6902;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.cta-btn:hover {
    background: rgb(246, 139, 31); /* lighter orange on hover */
    text-decoration: none;
    transition: background-color 0.2s ease;
}
/* Trusted By section */
.trusted-by-section {
    background: #ffffff;
}
.trusted-heading-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* remove space between triangle and heading */
}
.trusted-heading-wrapper .trusted-triangle {
    margin-right: 5px; /* space between triangle and heading */
}
.trusted-by-section .trusted-triangle {
    display: block; /* remove inline svg whitespace */
    line-height: 0;
}
.trusted-triangle polygon {
    fill: var(--mchale-orange);
}
.trusted-triangle {
    stroke: var(--mchale-orange);
}
/* Ensure trusted triangles (default) are visible and consistently orange.
   Section-specific rules (e.g. .how-we-do or .mobile-menu) may override this
   where a white triangle is desired. */
.trusted-triangle,
.trusted-triangle polygon,
.nav-down-arrow,
.nav-down-arrow polygon {
    display: inline-block;
    width: 16px;
    height: 16px;
    fill: #FF6902;
    stroke: #FF6902;
}
h1 {
    font-family: "proxima-nova-extra-condensed", sans-serif;
    font-weight: 800;
    font-style: normal;
}
.trusted-heading {
    font-family: proxima-nova, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800; /* Regular */
    font-size: 1.5rem;
    color: var(--mchale-orange);
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}
.trusted-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: center;
    justify-items: center;
}
.trusted-item img {
    width:100%;
    max-height:45px;
    height: auto;
    object-fit: contain;
    display: block;
}
.trusted-item.img-vertical img {
    max-height: 95px; /* allow taller logos to be a bit taller when marked vertical */
}
/* Small responsive fallback: on narrow screens revert the stack to normal single-column tiles */
@media (max-width: 900px) {
    .portfolio-stack {
        display: block; /* each anchor will flow as a normal block within the column */
    }
    .portfolio-stack .stacked-tile {
        aspect-ratio: 2 / 1; /* fall back to standard tile aspect on tablet */
        margin-bottom: 5px;
    }

    /* allow taller logos to be a bit taller when marked vertical */
    .trusted-item.img-vertical img {
        max-height: 60px;
    }
    .trusted-item.img-horizontal img {
        max-height: 32px; /* constrain very wide logos */
    }
}
@media (max-width: 900px) {
    .trusted-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .trusted-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .trusted-item img { max-height: 48px; }
}
/* Ensure trusted triangles (default) are visible and consistently orange.
   Section-specific rules (e.g. .how-we-do or .mobile-menu) may override this
   where a white triangle is desired. */
.trusted-triangle,
.trusted-triangle polygon,
.nav-down-arrow,
.nav-down-arrow polygon {
    display: inline-block;
    width: 14px;
    height: 14px;
    fill: #FF6902;
    stroke: #FF6902;
}

/* Rotate triangle icons 90deg so they point in the desired direction. This will
   affect inline SVGs and <img> tags that use the .trusted-triangle class. */
.trusted-triangle {
    transform: rotate(0deg);
    transform-origin: center center;
    display: inline-block; /* ensure transform applies to img/svg */
}

/* Rotate only the triangle for the Work Together nav item */
.work-together-nav-item .trusted-triangle,
.trusted-triangle.work-together,
.mobile-menu .mobile-nav-item .trusted-triangle.work-together {
    transform: rotate(-90deg) !important;
}

/* Header/nav specific triangle: make sure it remains visible on white headers */
.nav-menu .nav-item .nav-down-arrow {
    width: 16px;
    height: 16px;
    top: 26px;
}

/* Ensure CTA spans the full header height by matching the header padding + line-height */
header .container .cta-btn {
    height: 77px;
    padding: 0 10px;
    border-radius:0;
}

.cta-btn .cta-arrow {
    stroke: #fff;
    fill: #fff;
    width: 16px;
    height: 16px;
    margin-bottom: 5px;
}
.cta-arrow polygon {
    color:#fff;
}

/* Center any .av-menu list items vertically inside the main .nav-menu
   - Ensure the nav menu is a flex container and aligned center
   - Make .av-menu a horizontal flex row and vertically center its li elements
   - Remove the previous top padding which pushed items down
*/
.nav-menu {
    display: flex; /* enforce flex layout */
    align-items: center; /* vertical center of children */
    height: 100px;
    flex-wrap: nowrap;   /* keep items on a single line */
    white-space: nowrap; /* prevent text wrapping inside items */
    overflow: visible;
    gap: 18px;
}
.nav-menu .av-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px; /* breathing room between av-menu items */
    margin: 0;
    padding: 0;
}
.nav-menu .av-menu li {
    display: flex;
    align-items: center;
    padding-top: 0; /* override earlier padding that misaligned items */
    margin: 0 8px;
    flex: 0 0 auto; /* prevent list items from shrinking/wrapping */
}

/* Keep the left margin on the header container but remove the right margin
   so the header content can extend fully to the right edge while preserving
   the existing left offset. This targets only the header's container. */
header .container {
    padding-left: 36px; /* keep the left offset */
    padding-right: 0;   /* remove right margin/padding */
    display: flex;      /* make container a flex row so children align predictably */
    align-items: center; /* vertical centering for header content */
    gap: 24px;
    padding-top:29px;
    padding-bottom:29px;
}

/* Ensure nav sits against the right edge of the container and doesn't shrink */
header .container nav {
    margin-left: auto; /* push nav to the far right inside the container */
    padding-right: 0;
    flex-shrink: 0;    /* avoid nav shrinking when container width changes */
}

/* On wide screens, pin the nav to the viewport right edge so it doesn't
   leave a gap when the centered container has a max-width. This keeps
   mobile/tablet behavior unchanged (the rule is desktop-only). */
@media (min-width: 900px) {
    header { position: relative; }
    header nav {
        position: absolute;
        right: 0; /* flush with viewport right edge */
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0; /* ensure no auto margin interferes */
        padding-right: 20px; /* a bit of breathing room from the edge if needed */
        z-index: 50; /* keep the nav above other header content */
    }
}

/* Hamburger button (hidden on wide screens) */
.hamburger-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 12px;
}
.hamburger-box {
    width: 24px;
    height: 18px;
    display: inline-block;
    position: relative;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: #242424;
    position: absolute;
    left: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger-inner { top: 8px; }
.hamburger-inner::before { content: ''; top: -6px; }
.hamburger-inner::after { content: ''; top: 6px; }

/* Animated open/close state for hamburger */
.hamburger-btn.open .hamburger-inner {
    background-color: transparent;
}
.hamburger-btn.open .hamburger-inner::before {
    transform: translateY(6px) rotate(45deg);
    background-color: #fff; /* white for clear contrast when open */
}
.hamburger-btn.open .hamburger-inner::after {
    transform: translateY(-6px) rotate(-45deg);
    background-color: #fff;
}

/* Brand styling: make the hamburger bars use brand color on mobile */
.hamburger-btn .hamburger-inner,
.hamburger-btn .hamburger-inner::before,
.hamburger-btn .hamburger-inner::after {
    background-color: #FF6902;
}

/* Mobile nav appearance (brand-styled) */
.mobile-nav-open header .container nav {
    display: block;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    width: 100%;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 60;
}
.mobile-nav-open .nav-menu {
    display: block;
    padding: 12px 18px;
}
.mobile-nav-open .nav-menu li {
    display: block;
    margin: 8px 0;
}
.mobile-nav-open .nav-menu a {
    display: inline-block;
    padding: 12px 8px;
    color: #242424;
    text-decoration: none;
    font-weight: 700;
}
.mobile-nav-open .nav-menu a:hover,
.mobile-nav-open .nav-menu a:focus {
    background: rgba(255,105,2,0.06);
    outline: none;
    color: #FF6902; /* match hover color on desktop */
    text-decoration: none; /* remove underline on hover */
}

/* CTA in mobile nav: full-width orange button */
.mobile-nav-open .nav-menu .cta-btn {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    background: #FF6902;
    color: #fff;
    border-radius: 4px;
}

/* Make hamburger visually prominent on mobile (position at right inside header) */
@media (max-width: 900px) {
    .hamburger-btn {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile: hide nav and show hamburger at 900px and below */
@media (max-width: 900px) {
    .hamburger-btn { display: inline-block; }
    header .container nav { display: none; }

    /* When mobile nav is open, we will toggle a class to show it */
    .mobile-nav-open header .container nav {
        display: block;
        position: absolute;
        right: 0;
        top: 100%;
        background: #fff;
        width: 100%;
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }

    .mobile-nav-open .nav-menu {
        display: block;
        padding: 12px 18px;
    }
    .mobile-nav-open .nav-menu li {
        display: block;
        margin: 8px 0;
    }
}

/* Hover/focus styles for mobile overlay links (the slide-out / overlay menu) */
.mobile-menu .mobile-link:hover,
.mobile-menu .mobile-link:focus {
    color: #FF6902;
    text-decoration: none;
}

/* Mobile menu overlay (separate overlay panel shown when mobile nav is opened)
   This panel is shown by toggling `body.mobile-nav-open` from the JS. */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    display: none; /* shown when body.mobile-nav-open */
    align-items: flex-start;
    justify-content: center;
}
.mobile-menu .mobile-menu-nav {
    background: #333;
    width: 100%;
    max-width: none; /* full-bleed panel on mobile */
    height: 100vh;
    padding: 28px 20px;
    box-sizing: border-box;
    color: #fff;
}
.mobile-menu nav ul { list-style: none; padding: 0; margin: 48px 0 0 0; }
.mobile-menu .mobile-nav-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.mobile-menu .mobile-triangle { fill: #fff; stroke: #fff; width: 18px; height: 18px; visibility: hidden; }
.mobile-menu .trusted-triangle { fill: #fff; stroke: #fff; }
.mobile-menu .mobile-link { color: #fff; text-decoration: none; font-size: 20px; font-weight: 700; }
.mobile-menu .mobile-link.active { color: var(--mchale-orange); }
.mobile-menu .mobile-nav-item.active .mobile-triangle { visibility: visible; }
.mobile-menu .mobile-link[href*="work-together"] {
    display: block;
    width: 100%;
    background: var(--mchale-orange);
    color: #fff;
    padding: 14px 18px;
    text-align: center;
    border-radius: 4px;
    font-weight: 800;
}
.mobile-menu-close {
    position: absolute;
    left: 12px;
    top: 12px;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}
/* When body has mobile nav open, show the overlay */
body.mobile-nav-open .mobile-menu { display: flex; }
/* Hide on desktop */
@media (min-width: 901px) {
    .mobile-menu { display: none !important; }
}

/* Ensure nav sits against the right edge of the container */
header .container nav {
    margin-left: auto; /* push nav to the far right inside the container */
    padding-right: 0;
}
/* End Header Styles */

/* Footer Styles */
footer {
    background-color: #6E6E71;
    padding: 20px 0;
    text-align: center;
    color: #77787B;
    text-transform:uppercase;
    font-size: 16px;
    margin-top: 40px;
}
.contact-columns { display: grid; grid-template-columns: 50% 50%; gap: 12px; }
.contact-col address, .contact-col p, .contact-col a { margin: 0; color: #fff; font-family: 'Gotham HTF Book', sans-serif; }
.contact-col a.phone { font-size: 24px; text-decoration:none; }
.contact-col a.email { font-size: 16px; text-transform:lowercase; text-decoration:none; }
.footer-contact h3 {
    font-weight: 400;
    font-size: 30px;
    color: #fff;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.site-footer {
    background: #6E6E71;
    color: #fff;
    padding: 40px 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
.footer-logo img { max-width: 220px; display: block; }
.footer-contact h4 { margin: 0 0 8px; text-transform: uppercase; font-family: 'Gotham HTF Bold', sans-serif; }
.contact-col address, .contact-col p { margin: 0; color: #fff; }
.contact-col a { color: #fff; text-decoration: underline; }
.footer-social .social-icons { display:flex; justify-content: center; gap: 12px; }
.footer-social .social img { width: 45px; height: 45px; display:block; border-radius: 50%; padding: 6px; }
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr; text-align: left; }
    .contact-columns { grid-template-columns: 1fr; }
}
.case-study-section .capabilities-row {
    display:grid;
    grid-template-columns: 35% 65%;
}
@media screen and (max-width: 900px) {
    .case-study-section .capabilities-row {
        display:grid;
        grid-template-columns:100%;
    }
    .case-study-section .cap-image img {
        position:relative;
        right: 0;
        margin: 0 auto;
    }
}
.case-study-section .cap-image img {
    position:relative;
}
@media screen and (max-width: 600px) {
    .case-study-section .cap-image img {
        position:relative;
        right: 0;
        margin: 0 auto;
    }
}
/* Footer styles: three-column layout on desktop, centered stacked layout on tablet/mobile */
.site-footer {
    background: #6E6E71; /* keep dark background if desired; change as needed */
    color: #fff;
    padding: 36px 0;
}
.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 220px 1fr 220px; /* logo / contact / social */
    gap: 24px;
    align-items: start;
    align-items: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}
.site-footer .footer-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}
.site-footer .footer-contact h3 {
    margin: 0 0 8px 0;
}
.site-footer .contact-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.site-footer .contact-col address,
.site-footer .contact-col p {
    margin: 0;
    color: #ffffff;
}
.footer-contact {
    padding: 0 40px;
    border-left: 1px solid rgba(255, 255, 255);
    border-right: 1px solid rgba(255, 255, 255);
}
/* Tablet: stack and center content, horizontally center logo and address */
@media (max-width: 900px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    .site-footer .contact-columns {
        grid-template-columns: 1fr; /* stack contact columns */
        justify-items: center;
    }
    .site-footer .contact-col address,
    .site-footer .contact-col p {
        text-align: center !important;
    }
    .site-footer .footer-logo img {
        margin: 0 auto;
    }
    .site-footer .footer-social .social-icons {
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: center;
    }
}

/* Mobile: small tweaks for spacing */
@media (max-width: 600px) {
    .site-footer {
        padding: 28px 0;
    }
    .site-footer .contact-columns { gap: 8px; }
    .site-footer .footer-logo img { max-width: 180px; }
}
/* End Footer Styles */

/* Single post content styles */
        .single-post-content p {
          font-size: 1.5rem;
          max-width: 800px;
          margin: 1.5rem auto;
          padding: 0 2rem;
          line-height: 1.3;
        }
        
        .single-post-content img {
          width: 100vw;
          max-width: none;
          margin-left: 50%;
          transform: translateX(-50%);
          height: auto;
          display: block;
        }
        
        .single-post-content h1,
        .single-post-content h2,
        .single-post-content h3,
        .single-post-content h4,
        .single-post-content h5,
        .single-post-content h6 {
          max-width: 800px;
          margin: 2rem auto 1rem;
          padding: 0 2rem;
          text-align: left;
          font-weight: bold;
        }
        .single-post-content h1 { font-size: 3rem; }
        .single-post-content h2 { font-size: 2.5rem; }
        .single-post-content h3 { font-size: 2rem; }
        .single-post-content h4 { font-size: 1.75rem; }
        .single-post-content h5 { font-size: 1.5rem; }
        .single-post-content h6 { font-size: 1.25rem; }
        
        .single-post-content ul,
        .single-post-content ol {
          max-width: 800px;
          margin: 1.5rem auto;
          padding: 0 2rem;
          font-size: 1.5rem;
        }
        
        .single-post-content blockquote {
          max-width: 800px;
          margin: 2rem auto;
          padding: 1rem 2rem;
          border-left: 4px solid #ccc;
          background: #f9f9f9;
          font-size: 1.5rem;
          font-style: italic;
        }
        .single-post-content blockquote p {
          margin: 0;
        }
        .single-post-content a {
          color: #FF6902;
          text-decoration: underline;
        }
        .single-post-content a:hover {
          color: #e65c00;
          text-decoration: none;
        }
/* End Single post content styles */

/* Overlay hidden by default; show when body has .mobile-nav-open */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
body.mobile-nav-open .mobile-menu { display: block; }

/* Backdrop covers the screen and is clickable to close */
.mobile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  border: 0;
  cursor: pointer;
}

/* Slide-in panel */
.mobile-menu-nav {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 90vw);
  background: #fff;
  box-shadow: -10px 0 25px rgba(0,0,0,.15);
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

/* Header row */
.mobile-menu-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}
.mobile-close {
  font-size: 2rem;
  line-height: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* List & items */
.mobile-list { list-style: none; margin: 0; padding: 0; }
.mobile-nav-item { margin: .5rem 0; }

/* Links */
.mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: .75rem 0;
  color: #111827; /* gray-900 */
  border-bottom: 1px solid #E5E7EB; /* gray-200 */
}
.mobile-link:hover { color: #111827; }

/* Active triangle */
.mobile-triangle {
  margin-left: .75rem;
  fill: currentColor;
}
.mobile-nav-item.is-active .mobile-link { font-weight: 600; }

/* Customizer Updates */
@media screen and (max-width:465px) {
	.who-we-are .who {
		transform: scale(0.8);
		left: calc(20% - 46.00px);
	}
	.who-we-are .we {
		transform:scale(0.8);
		left: calc(50% - 74.705px);
		top: 20%;
	}
	.who-we-are .are {
		transform:scale(0.8);
			left: calc(80% - 36.75px);
	}
}
/* Tailwind utilities via @apply if you’re compiling, or write plain CSS */
.nav-menu > li.is-cta > a {
    height: 56px; /* default header height fallback */
    padding: 50px 18px;
    background: #FF6902;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
	  height: 77px;
    padding: 0 10px;
    border-radius:0;
}
.nav-menu > li.is-cta > a:hover {
    background: rgb(246, 139, 31); /* lighter orange on hover */
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.nav-menu > li.is-cta > a .cta-arrow {
    stroke: #fff;
    fill: #fff;
    width: 16px;
    height: 16px;
    margin-bottom: 5px;
}
/* CTA in mobile nav: full-width orange button */
.mobile-nav-open .nav-menu > li.is-cta > a {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    background: #FF6902;
    color: #fff;
    border-radius: 4px;
}
/* Style.css */
.news-archive-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* News.css */
.news-archive-title {
	font-size:3rem;
}
.load-more-btn {
	text-transform: uppercase;
}
/* Single post content styles */
        .single-post-content p {
          font-size: 1.5rem;
          max-width: 800px;
          margin: 1.5rem auto;
          padding: 0 2rem;
          line-height: 1.3;
        }
        
        .single-post-content img {
          width: 100vw;
          max-width: none;
          margin-left: 50%;
          transform: translateX(-50%);
          height: auto;
          display: block;
        }
        
        .single-post-content h1,
        .single-post-content h2,
        .single-post-content h3,
        .single-post-content h4,
        .single-post-content h5,
        .single-post-content h6 {
          max-width: 800px;
          margin: 2rem auto 1rem;
          padding: 0 2rem;
          text-align: left;
          font-weight: bold;
        }
        .single-post-content h1 { font-size: 3rem; }
        .single-post-content h2 { font-size: 2.5rem; }
        .single-post-content h3 { font-size: 2rem; }
        .single-post-content h4 { font-size: 1.75rem; }
        .single-post-content h5 { font-size: 1.5rem; }
        .single-post-content h6 { font-size: 1.25rem; }
        
        .single-post-content ul,
        .single-post-content ol {
          max-width: 800px;
          margin: 1.5rem auto;
          padding: 0 2rem;
          font-size: 1.5rem;
        }
        
        .single-post-content blockquote {
          max-width: 800px;
          margin: 2rem auto;
          padding: 1rem 2rem;
          border-left: 4px solid #ccc;
          background: #f9f9f9;
          font-size: 1.5rem;
          font-style: italic;
        }
.nav-menu > li.is-cta > a:hover, .how-we-do .btn-watch:hover {
	background-color: #fff;
	border: 2px solid #FF6902;
}
.how-we-do .btn-watch:hover .trusted-triangle {
	stroke:#FF6902;
	fill:#FF6902;
}
.how-we-do .btn-watch:hover .btn-text {
	color: #FF6902;
}
.nav-menu > li.is-cta > a:hover .cta-arrow {
	stroke: #FF6902;
	fill: #FF6902;
}
.nav-menu > li.is-cta > a:hover .text-white {
	color:#FF6902;
}
.btn-see:hover {
	background-color: #FF6902;
}
.btn-see:hover .trusted-triangle {
	stroke:#fff;
	fill:#fff;
}
.btn-see:hover .btn-see-text {
	color: #fff;
}
.load-more-btn .trusted-triangle {
    position: relative;
    top: -2px;
}
.btn-see .trusted-triangle {
	position:relative;
	top:0px;
}
@media screen and (max-width:900px){
	header .container {
		flex-direction:column;
		align-items:center;
		padding-left:0px;
	}
	.hamburger-btn {
		margin-right: auto;
	}
}
.capabilities-section .cap-image {
	background-image: url(http://localhost/mchale-wp/wp-content/themes/mchale_design/_img/capabilities-1.png);
	height:100%;
	background-size: cover;
}
.case-study-section .cap-image {
    background-image: url(http://localhost/mchale-wp/wp-content/themes/mchale_design/_img/case-study-1.jpg);
    height: 100%;
    background-size: cover;
}