/* Minification failed. Returning unminified contents.
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,31): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(79,30): run-time error CSS1039: Token not allowed after unary operator: '-font-degular'
(81,27): run-time error CSS1039: Token not allowed after unary operator: '-font-geom'
(83,30): run-time error CSS1039: Token not allowed after unary operator: '-font-archivo'
(85,35): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(89,25): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(92,82): run-time error CSS1039: Token not allowed after unary operator: '-font-degular'
(93,82): run-time error CSS1039: Token not allowed after unary operator: '-font-degular'
(101,201): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(102,196): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(117,45): run-time error CSS1039: Token not allowed after unary operator: '-font-geom'
(125,159): run-time error CSS1038: Expected hex color, found '#0009'
(133,33): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(136,162): run-time error CSS1039: Token not allowed after unary operator: '-font-geom'
(137,130): run-time error CSS1039: Token not allowed after unary operator: '-font-geom'
(138,9): run-time error CSS1030: Expected identifier, found '.'
(138,28): run-time error CSS1031: Expected selector, found ')'
(138,28): run-time error CSS1025: Expected comma or open brace, found ')'
(197,82): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(199,118): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(218,68): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(232,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(234,17): run-time error CSS1039: Token not allowed after unary operator: '-text-on-dark-soft'
(241,28): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(250,28): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(258,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(259,68): run-time error CSS1039: Token not allowed after unary operator: '-text-on-dark-soft'
(267,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(269,52): run-time error CSS1039: Token not allowed after unary operator: '-btn-border-strong'
(297,32): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(329,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(351,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(352,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-bold'
(361,49): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line'
(363,50): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line'
(375,79): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line'
(395,32): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line'
(402,23): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(403,23): run-time error CSS1039: Token not allowed after unary operator: '-fw-light'
(405,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted-strong'
(408,34): run-time error CSS1039: Token not allowed after unary operator: '-text-muted-strong'
(424,36): run-time error CSS1039: Token not allowed after unary operator: '-ftr-line'
(444,28): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(448,32): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(454,61): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light'
(457,33): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(464,97): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(464,258): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg'
(464,273): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg'
(470,120): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(503,70): run-time error CSS1039: Token not allowed after unary operator: '-line-on-dark'
(534,37): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(535,37): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(553,38): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(555,53): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(555,197): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(565,33): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(567,64): run-time error CSS1039: Token not allowed after unary operator: '-line-on-light'
(599,42): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(599,184): run-time error CSS1039: Token not allowed after unary operator: '-text-faint'
(600,40): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(601,39): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(610,92): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(616,39): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(619,38): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(626,39): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(628,38): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(629,38): run-time error CSS1039: Token not allowed after unary operator: '-font-avant'
(629,117): run-time error CSS1039: Token not allowed after unary operator: '-text-muted-strong'
 */
/* ==========================================================================
   DESIGN TOKENS
   Derived from the ABC Designs Figma (file ErIWbDeYMNP1lwG5zCA6YJ). The Figma
   has no formal variables, so these are curated from the design's values.
   Loaded first in the ~/content/home bundle (BundleConfig.cs), so every
   stylesheet can reference them with var(). Add new shared values here rather
   than hard-coding them in multiple places.
   Note: CSS custom properties can't be used inside @media conditions, so the
   breakpoints below are documentation only — keep the px in the media queries.
   ========================================================================== */

:root {
    /* ----- Type families ----- */
    --font-avant: "itc-avant-garde-gothic-pro", sans-serif; /* primary redesign font */
    --font-degular: "degular", sans-serif;
    --font-geom: "geom-graphic", sans-serif;
    --font-archivo: "Archivo", sans-serif;

    /* ----- Font weights (Avant Garde ships 300/500/700; Figma "Demi" -> 700) ----- */
    --fw-light: 300;
    --fw-medium: 500;
    --fw-bold: 700;

    /* ----- Brand / surfaces ----- */
    --color-white: #fff;
    --color-black: #000;
    --color-dark: #232323;   /* site background + dark section bg */
    --color-accent: #6ec8ff; /* nav underline / highlight */

    /* ----- Text on light sections ----- */
    --text-dark: #000;
    --text-muted: rgba(0, 0, 0, 0.52);
    --text-muted-strong: rgba(0, 0, 0, 0.6);
    --text-faint: rgba(0, 0, 0, 0.42);

    /* ----- Text on dark sections ----- */
    --text-on-dark: #fff;
    --text-on-dark-soft: rgba(255, 255, 255, 0.84);

    /* ----- Lines / dividers ----- */
    --line-on-light: rgba(0, 0, 0, 0.49);        /* rules on white sections */
    --line-on-dark: rgba(255, 255, 255, 0.55);   /* hero divider over the image */

    /* ----- Buttons ----- */
    --btn-bg: #cdcaca;
    --btn-border: #e9e9e9;
    --btn-border-strong: #1d1d1d;

    /* ----- Type scale (Figma px) ----- */
    --fs-hero: 4rem;       /* 64px  hero H1 */
    --fs-display: 3rem;    /* 48px  dark banner heading / review quote */
    --fs-heading: 2.375rem;/* 38px  section headings */
    --fs-project: 2.5rem;  /* 40px  project card title */
    --fs-links: 2.25rem;   /* 36px  service links */
    --fs-attr: 2rem;       /* 32px  review attribution */
    --fs-20: 1.25rem;      /* 20px  hero slide label */
    --fs-18: 1.125rem;     /* 18px  nav items / buttons */
    --fs-base: 1rem;       /* 16px  body copy */
    --fs-eyebrow: 0.75rem; /* 12px  project eyebrow */

    /* ----- Layout ----- */
    --container-max: 1470px; /* the site .container max-width (= Figma 1440 content + 2×15 gutter) */
    --content-max: 1920px;   /* 1920 cap used by the full-bleed services section */
    --gutter: 15px;          /* .container side padding */
    --radius: 8px;           /* buttons / dropdown */

    /* ----- Breakpoints (documentation only — not usable in @media) ----- */
    --bp-xs: 500px;
    --bp-sm: 768px;
    --bp-md: 992px;
    --bp-lg: 1230px;
    --bp-xl: 1671px;
}

html { margin: 0; padding: 0; scroll-behavior: smooth; }

body { background-color: var(--color-dark); color: #fff; margin: 0; padding: 0; position: relative; font-size: 1rem; overflow-x: hidden; }

.degular { font-family: var(--font-degular); font-style: normal; font-display: swap; }

.geom { font-family: var(--font-geom); font-weight: 600; font-style: normal; font-display: swap; }
.geom.light { font-weight: 300; }
.archivo { font-family: var(--font-archivo); font-style: normal; font-display: swap; }

.bg-dark { background-color: var(--color-dark); }

.bg-white { background-color: #fff; }

.txt-dark { color: var(--color-dark); }
.txt-whi { color: #fff; }
.pointer { cursor: pointer; }
h1 { margin: 0; padding: 0; line-height: 1; font-size: 5.3rem; font-family: var(--font-degular); font-style: normal; font-weight: 300; }
h2 { margin: 0; padding: 0; line-height: 1; font-size: 2.4rem; font-family: var(--font-degular); font-style: normal; font-weight: 300; }

.banner { background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: top center; }

.banner.home { background-image: url(/Content/images/banners/banner-home.webp); }

.home-bg { background-image: url(/Content/images/home/home-bg.jpg); background-size: cover; background-repeat: no-repeat; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; }

.skew-bg:before { content: ""; position: absolute; clip-path: polygon(100% 0, 0% 100%, 100% 100%); width: 100%; height: 100px; top: 0; transform: translateY(calc(-100% + 3px)); background-color: var(--color-dark); }
.skew-bg:after { content: ""; position: absolute; clip-path: polygon(0 3%, 0 100%, 100% 0); width: 100%; height: 100px; bottom: 0; transform: translateY(calc(100% - 3px)); background-color: var(--color-dark); }

.lazy {max-height:1px;}


.vert-divider { background-color: #7a7a7a; width: 1px; height: 100%; }

.hor-divider { background-color: #7a7a7a; height: 1px; width: 100%; }

.pl-105 { padding-left: 105px; }

.z-0 { z-index: -1; }
.z-1 { z-index: 9; }
.z-2 { z-index: 99; }

.field-validation-error { font-family: var(--font-geom); font-weight: 300; font-style: normal; font-display: swap; color:#ff0000; padding-bottom:5px; padding-top:5px; font-size:0.9rem; }

.upper { text-transform: uppercase }

a { color: #fff; text-decoration: none; }

.dw-grid.inner-borders { grid-gap: 2px; background-color: gray; }

.img-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #0009; color: #fff; }

a:hover .img-overlay { display: none; }

.grey-border { border: 1px solid gray; }


/*FORM*/
select { background-color: var(--color-dark) !important; }
.contact-form { margin-top: 300px; max-width: 900px; }
::placeholder { color: #fff; font-weight: 300; }
input, textarea, select, .upload-btn { border: none; outline: none; height: 50px; background-color: transparent; color: #fff; font-size: 1rem; font-family: var(--font-geom); font-weight: 500; font-style: normal; font-display: swap; border-bottom: 2px solid #fff; width: 100%; }
.contact-submit-btn { cursor:pointer; background-color: transparent; border: none; border-top: 2px solid #fff; font-family: var(--font-geom); font-weight: 500; font-style: normal; font-display: swap; display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 15px; padding-bottom: 15px; font-size: 1rem; color: #fff; cursor: pointer; }
div:has(.contact-submit-btn) { align-self: flex-end; }

/* file upload button */
input[type="file"] { border: none; max-height: min-content; height: initial; }
input[type="file"]::file-selector-button { display: none; }


.dw-theme .dw-nav { position: absolute; left: 0; top: 0; margin-top: 0 !important; }

.dw-dots { position: absolute; left: 150px; top: 45px; }



.hov-und:hover {text-decoration:underline; cursor:pointer;}
.hov-grow:hover {transform:scale(1.2);}


.support-container {margin-top:60px; font-size:1.2rem;}

.support-container h1 {font-size:3.5rem;}
.support-container h2 {margin-top:15px; margin-bottom:15px;}



@media screen and (max-width:1230px) { .contact-form { margin-top: 30px; max-width: initial; }
  .dw-dots { position: absolute; left: 0; top: 76px; }

  .skew-bg:before { height:75px; }
  .skew-bg:after { height: 75px; }
}

@media screen and (max-width: 992px) {
  #footer { text-align: center; }
  #footer .p-45 { padding: 0 !important; }
  .px-45 { padding-right: 15px !important; padding-left: 15px !important; }
  .dw-theme .dw-nav { width: 100%; display: flex; justify-content: space-between; }
  .dw-dots { position: absolute; left: 50%; transform: translateX(-50%); top: 45px; }
  .dw-prev, .dw-next { display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; background-color: #7a7a7a !important; }
  .home-bg.p-75 { padding: 0; }
  .flx.flx-col.gap-15.max-w-540.archivo { max-width: initial !important; }
  .dw-grid.mt-75.gap-15 { margin-top: 45px; }
  .archivo.fs-15.pl-105 { padding-left: 0; text-align: center; width: 100%; padding: 0 50px; margin-bottom: 50px; font-size: 1.1rem; }
  .dw-grid.gap-30.pb-75 { padding-bottom: 0; }
  #review-carousel .fs-20 {font-size:1.4rem;}
  #review-carousel .fs-15 {font-size:1.1rem;}
}

@media screen and (max-width: 767px) {
  h1 { font-size: 4rem; }
  #footer .p-45 { margin: -15px; }
  #footer .dw-grid { border-top: 2px solid gray; font-size: 1.2rem !important; }
  .skew-bg:before { height: 50px; }
  .skew-bg:after { height: 50px; }
  .dw-grid .gap-30, .dw-grid .gap-45 { grid-gap: 15px; }

  /*.banner:not(.home) {height:calc(100vh - 60px)!important;}*/
  /*.banner.home {height:calc(100vh - 150px)!important;}*/
  #project-carousel {margin-top:14px!important;}

  .mobile-nav { position: fixed; bottom: 0; height: 60px; background-color: var(--color-dark); z-index: 999; width: 100%; display: flex; padding: 10px 15px; justify-content: space-between; align-items: center; }
  .mobile-nav a {width:122px;}
  .mob-nav-btn { height: 100%; width: 70px; display: flex; align-items: center; justify-content: center; color: var(--color-dark); background-color: #fff; border-radius: 30px; }
}

@media screen and (max-width: 500px) {
  h1 { font-size: 3rem; }
  #footer .dw-grid { font-size: 1rem !important; }
  .mt-60 { margin-top: 30px!important; }
  h1 {margin-bottom:60px!important;}
}

/* ==========================================================================
   SITE HEADER / NAV (2026 redesign)
   Global header (SiteHead.cshtml). Transparent over the hero on pages that set
   ViewBag.TransparentHeader (homepage); solid dark bar elsewhere.
   Desktop: horizontal nav with a Services dropdown. Mobile (<992px): hamburger
   that folds a panel down; Services becomes an accordion. Logic: site-header.js.
   ========================================================================== */

.site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; }
.site-header.is-solid { position: relative; background-color: var(--color-dark); }

.site-header__bar { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; }
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { width: 114px; height: auto; display: block; transition: transform .2s ease; }
.site-header__logo:hover img { transform: scale(1.05); }

/* ----- Desktop nav ----- */
.site-nav { display: flex; align-items: center; gap: 60px; }
.site-nav__list { display: flex; align-items: center; gap: 54px; list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: relative; }

.site-nav__link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-avant); font-weight: 500;
    font-size: 1.125rem; letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--text-on-dark-soft); background: none; border: 0; cursor: pointer;
    padding: 6px 0; position: relative; white-space: nowrap;
}
.site-nav__link:hover { color: #fff; }
/* Blue underline accent on hover (matches Figma) */
.site-nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background-color: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.site-nav__item:hover > .site-nav__link::after { transform: scaleX(1); }
.site-nav__chev { font-size: 0.7rem; transition: transform .2s ease; }
.site-nav__item.has-dropdown:hover .site-nav__chev { transform: rotate(180deg); }

/* Services dropdown */
.site-nav__dropdown {
    position: absolute; top: 100%; left: 0; min-width: 270px;
    background-color: var(--color-dark); border: 1px solid #3a3a3a; border-radius: 8px;
    padding: 8px; display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease; z-index: 10;
}
.site-nav__item.has-dropdown:hover .site-nav__dropdown,
.site-nav__item.has-dropdown.is-open .site-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav__dropdown-link {
    font-family: var(--font-avant); font-weight: 500; font-size: 1rem;
    letter-spacing: 0.01em; text-transform: uppercase; color: var(--text-on-dark-soft);
    padding: 11px 12px; border-radius: 6px; white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
.site-nav__dropdown-link:hover { background-color: #333; color: #fff; }

/* CTA button */
.site-nav__cta {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-avant); font-weight: 700; font-size: 1.125rem;
    letter-spacing: 0.02em; text-transform: uppercase; color: #000 !important;
    background-color: #fff; border: 1px solid var(--btn-border-strong); border-radius: 8px; padding: 13px 20px; line-height: 1;
    transition: background-color .2s ease;
}
.site-nav__cta:hover { background-color: #e6e6e6; color: #000 !important; }

/* ----- Hamburger (hidden on desktop) ----- */
.site-header__burger { display: none; }

/* ==========================================================================
   MOBILE (<992px): hamburger + fold-down panel
   ========================================================================== */
@media screen and (max-width: 991px) {
    .site-header__bar { padding: 18px 0; }
    .site-header__logo img { width: 92px; }

    .site-header__burger {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; z-index: 2;
    }
    .site-header__burger span { display: block; height: 3px; width: 26px; background-color: #fff; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
    .site-header.is-open .site-header__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .site-header.is-open .site-header__burger span:nth-child(2) { opacity: 0; }
    .site-header.is-open .site-header__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Nav becomes a fold-down panel below the bar */
    .site-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background-color: var(--color-dark); padding: 0 15px;
        max-height: 0; overflow: hidden; transition: max-height .35s ease;
    }
    .site-header.is-open .site-nav { max-height: 85vh; overflow-y: auto; padding-top: 8px; padding-bottom: 24px; }

    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .site-nav__item { border-bottom: 1px solid #333; }
    .site-nav__link { width: 100%; justify-content: space-between; padding: 16px 4px; color: #fff; font-size: 1.25rem; }
    .site-nav__link::after { display: none; }

    /* Services accordion */
    .site-nav__dropdown {
        position: static; min-width: 0; background: none; border: 0; border-radius: 0;
        padding: 0 0 8px 14px; opacity: 1; visibility: visible; transform: none;
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .site-nav__item.has-dropdown.is-open .site-nav__dropdown { max-height: 420px; }
    .site-nav__item.has-dropdown.is-open .site-nav__chev { transform: rotate(180deg); }
    .site-nav__dropdown-link { font-size: 1.05rem; padding: 12px 8px; }

    .site-nav__cta { width: 100%; margin-top: 18px; }
}

/* ==========================================================================
   SITE FOOTER (2026 redesign)
   Light footer used site-wide. Matches the Figma (file ErIWbDeYMNP1lwG5zCA6YJ,
   node 262:155): a bordered 2×2 grid — email / phone on top, address / social
   icons below — with a full-width horizontal rule, a full-height vertical rule
   splitting the two columns, and three short rules dividing the four socials.
   Loaded in the ~/content/home bundle (BundleConfig.cs), which is on every page.
   ========================================================================== */
.site-ftr {
    --ftr-line: rgba(0, 0, 0, 0.15);
    background-color: #fff;
    color: #000;
    padding: 80px 0 45px;
}
/* Site.css sets `a { color:#fff }` globally — restate for the light footer. */
.site-ftr a { color: #000; }
/* ...but the social buttons are black with a white glyph — the `a` rule above
   (class+type) outranks the `.site-ftr__social` class, so restate white here at
   higher specificity or the icons render black-on-black (invisible). */
.site-ftr a.site-ftr__social { color: #fff; }

/* ----- Contact grid ----- */
.site-ftr__grid {
    display: grid;
    grid-template-columns: 890fr 552fr; /* Figma 890 / 552 within the 1440 content */
    grid-template-rows: minmax(138px, auto) minmax(135px, auto);
}
.site-ftr__cell {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-family: var(--font-avant);
    font-weight: var(--fw-bold);
    font-size: 1.125rem; /* 18px */
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
}
/* The middle cross: horizontal rule above the bottom row, vertical rule left of
   the right column. Together they form the full-width + full-height dividers. */
.site-ftr__cell--address,
.site-ftr__socials { border-top: 1px solid var(--ftr-line); }
.site-ftr__cell--phone,
.site-ftr__socials { border-left: 1px solid var(--ftr-line); }

.site-ftr__cell--phone { justify-content: center; } /* phone is centred in the right column */

/* ----- Social row (right column, bottom cell) ----- */
.site-ftr__socials { padding: 0; align-items: stretch; }
.site-ftr__social-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-ftr__social-cell + .site-ftr__social-cell { border-left: 1px solid var(--ftr-line); }
.site-ftr__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 57px;
    background-color: #000;
    color: #fff;
    border: 1px solid #ceecff; /* subtle light-blue outline from the Figma */
    border-radius: 8px;
    font-size: 1.5rem; /* ~24px glyph */
    transition: transform .2s ease;
}
.site-ftr__social:hover { transform: scale(1.08); }

/* ----- Legal / copyright bar (kept from the old footer, restyled light) ----- */
.site-ftr__legal {
    margin-top: 45px;
    padding-top: 22px;
    border-top: 1px solid var(--ftr-line);
}
.site-ftr__legal-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--font-avant);
    font-weight: var(--fw-light);
    font-size: 0.8rem;
    color: var(--text-muted-strong);
    text-align: center;
}
.site-ftr__legal a { color: var(--text-muted-strong); }
.site-ftr__legal-links { display: flex; gap: 15px; }

@media screen and (min-width: 1230px) {
    .site-ftr__legal-inner { flex-direction: row; justify-content: space-between; text-align: left; }
    .site-ftr__legal-inner > div { flex: 1 1 0; }
    .site-ftr__legal-links { justify-content: center; }
    .site-ftr__legal-inner > #footnoteright { text-align: right; }
}

/* ----- Stack below the desktop grid ----- */
@media screen and (max-width: 991px) {
    .site-ftr { padding: 50px 0 35px; }
    .site-ftr__grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .site-ftr__cell {
        border-left: 0;
        border-top: 1px solid var(--ftr-line);
        justify-content: center;
        text-align: center;
        padding: 22px 0;
    }
    .site-ftr__cell--email { border-top: 0; padding-top: 0; }
    /* Socials become a centred row of buttons */
    .site-ftr__socials { align-items: center; justify-content: center; gap: 15px; }
    .site-ftr__social-cell { flex: 0 0 auto; }
    .site-ftr__social-cell + .site-ftr__social-cell { border-left: 0; }
    /* Drop the desktop 45px gap so the space below the icons matches the 22px above */
    .site-ftr__legal { margin-top: 0; }
}

/* ==========================================================================
   NEW HOMEPAGE (2026 redesign) — Figma "Avant Garde"
   All homepage-specific styles are scoped under .hp so other pages are
   unaffected. Design reference: 1920px-wide desktop frame.
   ========================================================================== */

.avant { font-family: var(--font-avant); font-style: normal; font-display: swap; }

/* Light content sections sit on white with dark text (site body is dark). */
.hp { background-color: #fff; color: #000; }
.hp .avant { font-family: var(--font-avant); }
/* Links inherit their section's text colour (white on dark hero/banner, black on light) */
.hp a { color: inherit; text-decoration: none; }

/* Shared section rhythm */
.hp-section { padding-top: 90px; padding-bottom: 90px; }
.hp-rule { height: 1px; width: 100%; background-color: var(--line-on-light); border: 0; margin: 0; } /* colour + margin:0 so it sits flush against the image */

/* Shared eyebrow/section heading */
.hp-heading { font-family: var(--font-avant); font-weight: 700; font-size: 2.375rem; /* 38px */ line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: #000; margin: 0; }

/* Shared pill button (Figma: #cdcaca fill, 8px radius, 13/16 padding, and a 1px
   gradient stroke #fff→#000 top-to-bottom for a subtle bevel). A gradient border
   with rounded corners needs the two-background trick: the fill paints on
   padding-box, the gradient paints on border-box, and the actual border is
   transparent so the border-box gradient shows through it. */
.hp-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-avant); font-weight: 700; font-size: 1.125rem; /* 18px */ letter-spacing: 0.02em; text-transform: uppercase; color: #000; background: linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box, linear-gradient(180deg, #fff, #000) border-box; border: 1px solid transparent; border-radius: 8px; padding: 13px 16px; line-height: 1; white-space: nowrap; transition: filter .2s ease; }
.hp-btn:hover { filter: brightness(0.96); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hp-hero { position: relative; min-height: 100vh; display: flex; color: #fff; overflow: hidden; background-color: var(--color-dark); }

/* Background slider: stacked full-bleed images that crossfade (driven by hero-slider.js).
   Add/remove slides in markup — the arrows, dots and label update automatically. */
.hp-hero__bg { position: absolute; inset: 0; z-index: 0; }
.hp-hero__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity .8s ease; }
.hp-hero__slide.is-active { opacity: 1; z-index: 1; }
/* banner-home.webp is the already-cropped 1920×1083 hero frame exported from
   Figma, so it's shown 1:1 (object-fit: cover just handles viewport aspect). */
.hp-hero__bg-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Content is constrained by .container; layout uses the dw-grid system.
   All spacing is anchored to the bottom of the viewport-height hero.
   NOTE: the selector is intentionally more specific than `.container`
   because dw-responsive.css (loaded after this file) sets
   `.container { padding: 0 15px }`, which would otherwise reset padding-bottom. */
.hp-hero .hp-hero__inner { position: relative; z-index: 2; width: 100%; align-self: flex-end; padding-bottom: 95px; /* space below the "Our Customers" row */ }

/* Headline row: H1 (left) + project indicator (right), baseline-aligned */
.hp-hero__headline-row { align-items: end; }
.hp-hero__title { font-weight: 700; font-size: 4rem; /* 64px */ line-height: 1.1; letter-spacing: 1.92px; /* matches Figma tracking exactly */ text-transform: uppercase; color: #fff; margin: 0; max-width: 764px; /* Figma H1 box width */ }

/* Project indicator (arrows + label + slide dots) */
.hp-hero__indicator { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: #fff; padding-bottom: 6px; }
.hp-hero__indicator-row { display: flex; align-items: center; gap: 19px; }
.hp-hero__indicator-arrows { display: flex; align-items: center; gap: 6px; }
.hp-hero__arrow { width: 20px; height: 20px; border-radius: 50%; background-color: #fff; color: #1f1f1f; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; cursor: pointer; flex-shrink: 0; transition: opacity .2s ease; }
.hp-hero__arrow:hover { opacity: 0.8; }
.hp-hero__indicator-label { font-weight: 300; font-size: 1.25rem; /* 20px */ letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.hp-hero__thumbs { display: flex; align-items: center; gap: 8px; }
.hp-hero__thumb { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; cursor: pointer; }
.hp-hero__thumb.is-active { width: 8px; height: 8px; background-color: transparent; border: 1px solid #fff; }

.hp-hero__divider { height: 1px; width: 100%; background-color: var(--line-on-dark); margin-top: 15px; }

/* Our Customers */
.hp-hero__customers { align-items: center; margin-top: 55px; }
.hp-hero__customers-label { font-weight: 700; font-size: 2.375rem; /* 38px */ line-height: 1.0; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.hp-hero__customers-label span { display: block; } /* desktop: "Our" / "Customers" on two lines */
/* Logos: a flex track holding two identical sets. Desktop shows one set right-
   aligned (the duplicate is hidden); mobile turns the track into a marquee. */
.hp-hero__logos { display: flex; justify-content: flex-end; }
.hp-hero__logos-track { display: flex; justify-content: flex-end; max-width: 100%; }
.hp-hero__logos-set { display: flex; align-items: center; gap: 45px; flex-wrap: wrap; justify-content: flex-end; }
.hp-hero__logos-set[aria-hidden="true"] { display: none; } /* duplicate only needed for the mobile loop */
.hp-hero__logos img { height: auto; width: auto; opacity: 0.95; }
/* The BBC logo was exported in grey (~#9b9b9b), not white. It's a single-colour
   mark, so brightness(0) invert(1) forces it white (preserving anti-aliasing).
   Scoped to BBC only — other logos are already white or have internal contrast
   (e.g. S4C) that must be preserved. */
.hp-hero__logos img[alt="BBC"] { filter: brightness(0) invert(1); }
/* Mobile marquee loop: two identical sets, so -50% advances exactly one set. */
@keyframes hero-logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hp-hero__logos-track { animation: none; } }

/* ==========================================================================
   INTRO — "Signage Design, Manufacture & Installation specialists"
   ========================================================================== */
/* Intro section spacing matches Figma: 105px above the content (from the hero)
   and 105px below (to the divider). Heading is vertically centred with the body. */
.hp-section--intro { padding-top: 105px; padding-bottom: 105px; }
.hp-section--intro .hp-heading { max-width: 560px; } /* wraps to 3 lines like the Figma */
.hp-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hp-intro__body { display: flex; flex-direction: column; gap: 16px; max-width: 715px; }
.hp-intro__lead { font-family: var(--font-avant); font-weight: 500; font-size: 1rem; /* 16px */ line-height: 1.625; color: #000; margin: 0; }
.hp-intro__text { font-family: var(--font-avant); font-weight: 300; font-size: 1rem; line-height: 1.625; color: #000; margin: 0; }

/* ==========================================================================
   SERVICES LINKS + image
   ========================================================================== */
/* The image is an in-flow right-half block, flush to the viewport's right edge,
   and it defines the section height (matches Figma: image spans divider→divider,
   x 970→1920). The left text is overlaid inside a real .container so its left edge
   lines up with every other section at all breakpoints. */
/* The whole section is capped at 1920px and centred, so the image stops at the
   1920 boundary (gutters appear beyond that) rather than growing with the viewport.
   The left text still aligns with .container because the overlay is centred within
   this 1920 box, which is itself centred in the viewport. */
.hp-svc { position: relative; max-width: 1920px; margin: 0 auto; }
.hp-svc__media { width: 50%; margin-left: auto; }
.hp-svc__img { display: block; width: 100%; height: auto; }
.hp-svc__overlay { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; }
.hp-svc__content { width: 580px; max-width: 100%; padding-top: 85px; pointer-events: auto; }
.hp-svc__heading { font-family: var(--font-avant); font-weight: 700; font-size: 2.375rem; /* 38px */ line-height: 38px; letter-spacing: 0.02em; text-transform: uppercase; color: #000; margin: 0; max-width: 380px; }
.hp-svc__links { display: flex; flex-direction: column; gap: 20px; margin-top: 211px; } /* Figma: 211px below the heading, 20px between rows */
.hp-svc__link { text-align: left; font-family: var(--font-avant); font-weight: 500; font-size: 2.25rem; /* 36px */ line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); padding: 0; transition: color .2s ease, transform .2s ease; }
/* Hover: indent + bold + dark (matches the Figma hover state on "External Signage") */
.hp-svc__links .hp-svc__link:last-of-type { line-height: 43px; }

.hp-svc__link:hover { color: #000; font-weight: 600; transform: translateX(28px); }
/* Force the long last link onto two lines like the Figma ("Exhibition Signage" /
   "& Displays"), left-aligned like the others. */
.hp-svc__link:last-child { max-width: 390px; }
/* `.hp a { color: inherit }` (for the dark hero/banner links) has higher
   specificity, so restate the link colours here to keep the default muted grey. */
.hp .hp-svc__link { color: var(--text-muted); }
.hp .hp-svc__link:hover { color: #000; }
.hp-svc__rule { border: 0; height: 1px; background-color: var(--line-on-light); margin: 0; }

/* Section divider that starts at the container's left edge and bleeds to the right
   viewport edge (the Figma lines run past the image). */
/* Starts at the container's left edge, ends at the 1920px boundary's right edge
   (matches the image; both stop growing past 1920px). */
/* Bleed rule: use 100% (containing-block content width) NOT 100vw — 100vw counts the
   scrollbar, so it would push the right edge ~half a scrollbar short of the image (which
   is laid out in the content box). 100% matches .container (left) and .hp-svc (right) exactly. */
.hp-rule--bleed { width: auto; margin-left: max(15px, calc((100% - 1470px) / 2 + 15px)); margin-right: max(0px, calc((100% - 1920px) / 2)); }

/* ==========================================================================
   FILM & TV PROJECTS
   Two stacked full-width project bands (Figma: image 1440×526 with a white
   info-card overlaying the bottom-right corner). "View all Projects" links out.
   ========================================================================== */
.hp-projects__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 70px; }
.hp-projects__title { max-width: 270px; } /* forces the Figma 2-line wrap: "OUR FILM &" / "TV PROJECTS" */
.hp-projects__list { display: flex; flex-direction: column; gap: 30px; } /* Figma: 30px between bands */
.hp-project { position: relative; background-color: #d4d4d4; }
.hp-project__img { display: block; width: 100%; height: auto; }
/* White card over the image, bottom-right. Figma: fixed 530px card, content inset
   44px left / 36px top; the button keeps ~24px clearance from the right & bottom
   edges (it must not touch them). Fixed width (not %) keeps the copy at design scale
   on our wider container; caps to 48% so it never dominates. */
/* right/bottom -1px so the opaque card fully covers the image's anti-aliased
   (fractional-height) edge — otherwise the image bleeds ~1px through the seam.
   The overhang sits in the white section gaps, so it's invisible. */
.hp-project__card { position: absolute; right: -1px; bottom: -1px; width: 530px; max-width: 48%; background-color: #fff; padding: 36px 24px 24px 44px; display: flex; flex-direction: column; align-items: flex-end; }
.hp-project__body { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
/* Tight line-heights so the visual eyebrow/title/desc rhythm matches Figma's
   cap-height boxes (otherwise default leading makes the 13px gaps look too loose). */
.hp-project__eyebrow { font-family: var(--font-avant); font-weight: 700; font-size: 0.75rem; /* 12px */ line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-faint); margin: 0; }
.hp-project__title { font-family: var(--font-avant); font-weight: 700; font-size: 2.5rem; /* 40px */ line-height: 0.8; letter-spacing: 0.02em; text-transform: uppercase; color: #000; margin: 0; }
.hp-project__desc { font-family: var(--font-avant); font-weight: 300; font-size: 1rem; /* 16px */ line-height: 1.625; letter-spacing: 0.02em; color: #000; margin: 0; max-width: 325px; }
.hp-project__cta { margin-top: 37px; } /* Figma: 37px from the copy block down to the Learn more button */

/* ==========================================================================
   DARK "Our Signage & Display Services" banner
   ========================================================================== */
/* Capped at 1920px (the image's native width) and centred, like the services
   section — beyond that the dark body background shows either side. The dark
   fade behind the text is baked into the image, so no CSS gradient is needed. */
.hp-banner { position: relative; max-width: 1920px; margin: 0 auto; background-color: var(--color-dark); background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; min-height: 762px; display: flex; align-items: flex-end; overflow: hidden; }
.hp-banner--services { background-image: url(/Content/images/home/signage-and-display-services.webp); }
/* More specific than `.container` (see hero note) so vertical padding survives.
   Figma: content block sits 89px off the bottom of the 762px section. */
.hp-banner .hp-banner__inner { position: relative; z-index: 2; width: 100%; padding-top: 89px; padding-bottom: 89px; }
.hp-banner__grid { display: flex; align-items: center; gap: 60px; }
.hp-banner__title { font-family: var(--font-avant); font-weight: 700; font-size: 3rem; /* 48px */ line-height: 0.9375; /* 45/48 */ letter-spacing: 0.02em; text-transform: uppercase; color: #fff; margin: 0; flex-shrink: 0; }
/* Body is capped at its Figma 685px and pushed to the container's right edge; the
   auto margin becomes the ~309px desktop gap and collapses gracefully as it narrows. */
.hp-banner__text { font-family: var(--font-avant); font-weight: 300; font-size: 1.125rem; /* 18px */ line-height: 1.444; /* 26/18 */ letter-spacing: 0.02em; color: #fff; margin: 0 0 0 auto; flex: 0 1 685px; min-width: 0; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.hp-reviews { padding-top: 110px; padding-bottom: 90px; }
.hp-review { display: flex; flex-direction: column; gap: 35px; align-items: flex-start; text-align: left; }
.hp-review__quote { font-family: var(--font-avant); font-weight: 500; font-size: 3rem; /* 48px */ line-height: 1.45; letter-spacing: 0.01em; color: #000; margin: 0; }
.hp-review__quote .muted { color: rgba(0,0,0,0.5); }
.hp-review__name { font-family: var(--font-avant); font-weight: 700; font-size: 2rem; /* 32px */ line-height: 1.3; letter-spacing: 0.02em; color: #000; margin: 0; }
.hp-review__role { font-family: var(--font-avant); font-weight: 300; font-size: 2rem; line-height: 1.3; color: var(--text-muted-strong); margin: 0; }
#review-carousel .dw-dots { position: static; margin-top: 76px; transform: none; left: auto; display: flex; gap: 19.2px; }
/* dwCarousel draws its own grey circle in an inner <span>; hide it and style the
   <button> as the dot so we get a single, controllable shape. */
#review-carousel .dw-dot { width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; background-color: #000; border: 0; padding: 0; }
#review-carousel .dw-dot > span { display: none; }
/* Figma: the active slide's dot is a hollow ring; the others are solid black. */
#review-carousel .dw-dot.active { background-color: transparent; border: 2px solid #000; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Services: shrink the heading→links gap and type between lg and xl so the
   overlaid content still fits within the (smaller) image height. */
@media screen and (min-width: 1230px) and (max-width: 1670px) {
    .hp-svc__links { margin-top: 90px; } /* smaller gap so content fits the shorter image; type stays 36px */
}

@media screen and (max-width: 1229px) {
    .hp-hero__title { font-size: 3.25rem; }
    .hp-heading { font-size: 2rem; }
    .hp-banner__title { font-size: 2.4rem; }
    .hp-review__quote { font-size: 2.4rem; }
    .hp-review__name, .hp-review__role { font-size: 1.7rem; }
    .hp-project__title { font-size: 2.1rem; }
    /* Services stacks below lg (the overlaid image needs desktop width) */
    .hp-svc { display: flex; flex-direction: column-reverse; }
    .hp-svc__media { width: 100%; margin: 0; }
    .hp-svc__overlay { position: static; height: auto; }
    .hp-svc__content { width: 100%; max-width: none; padding-top: 50px; padding-bottom: 45px; } /* breathing room below the top rule (stacked mobile layout) */
    .hp-svc__heading { max-width: none; font-size: 2rem; }
    .hp-svc__links { margin-top: 40px; }
    .hp-svc__link { text-align: left; font-size: 1.9rem; }
    .hp-svc__link:last-child { max-width: none; align-self: auto; }
    .hp-rule--bleed { margin-left: 15px; }
}

@media screen and (max-width: 991px) {
    .hp-section { padding-top: 60px; padding-bottom: 60px; }
    .hp-intro__grid { grid-template-columns: 1fr; gap: 30px; }
    .hp-banner { min-height: 520px; }
    .hp-banner .hp-banner__inner { padding-top: 60px; padding-bottom: 60px; }
    .hp-banner__grid { flex-direction: column; align-items: flex-start; gap: 20px; }
    .hp-banner__text { flex-basis: auto; margin-left: 0; max-width: 685px; }
    .hp-reviews { padding-top: 60px; padding-bottom: 60px; }
    .hp-review__quote { font-size: 2rem; }
    /* The 12-col grid + 30px gap collapses to 1.25px tracks at phone width, which
       mangles the indicator's placement. Stack the headline as plain flex instead.
       Selector out-specifies `.dw-grid` (dw-responsive.css loads after this file). */
    .hp-hero__inner .hp-hero__headline-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .hp-hero__title { margin-bottom: 28px !important; } /* beats the global mobile `h1 { margin-bottom: 60px !important }` */
    /* Indicator below the title, left-aligned: arrows + label on a row, dots
       beneath. Force full width + zero margins (a dw column class otherwise
       leaves it content-width and flush-right in the flex column). */
    .hp-hero__inner .hp-hero__indicator { display: flex; align-items: center; width: 100%; margin: 0; padding-bottom: 0; gap: 14px; } /* centre the label + arrows and the dots */
    .hp-hero__customers { margin-top: 18px; }
    /* NB: the customers stack + logo marquee live in their own max-width:1024px
       block below so iPad-mini-landscape (1024px) gets the carousel too. */

    /* Projects: the overlay card gets cramped on tablets, so stack it below the image */
    .hp-project { background-color: #fff; }
    .hp-project__card { position: static; width: 100%; max-width: none; padding: 24px 0 0; align-items: flex-start; } /* clear the desktop 48% cap so the stacked card spans full width */
    /* Titles wrap once stacked — 0.8 (tuned for the single-line desktop titles)
       makes the two lines collide, so relax the leading. */
    .hp-project__title { line-height: 1.05; }
    .hp-project__desc { max-width: none; } /* use the full stacked width instead of the 325px desktop cap */
    .hp-project__cta { margin-top: 24px; }
}

@media screen and (max-width: 767px) {
    .hp-hero { min-height: 100vh; min-height: 100dvh; } /* fill the screen so content sits low & the next section doesn't peek */
    .hp-hero__title { font-size: 2.5rem; }
    /* Phone: pull the content a touch lower than the base padding (mockup match) */
    .hp-hero .hp-hero__inner { padding-bottom: 78px; }
    .hp-hero__divider { margin-top: 12px; }

    /* Projects: card already stacked (≤991); just tighten type and the header */
    .hp-project__title { font-size: 1.9rem; }
    /* A taller crop gives the wide 1440×526 stills real presence on a phone
       instead of a thin strip; keep the copy flush with the image's left edge. */
    .hp-project__img { aspect-ratio: 3 / 2; object-fit: cover; }
    .hp-projects__head { flex-wrap: wrap; gap: 15px; margin-bottom: 30px; } /* 70px desktop gap is too much once stacked */
    .hp-projects__title { max-width: none; }

    .hp-review__quote { font-size: 1.6rem; line-height: 1.4; }
    .hp-review__name, .hp-review__role { font-size: 1.3rem; }
    .hp-banner__title { font-size: 2rem; }
}

@media screen and (max-width: 500px) {
    .hp-hero__title { font-size: 2rem; }
    .hp-heading { font-size: 1.7rem; }
    .hp-svc__link { font-size: 1.6rem; }
    /* Shrink the (nowrap) slide label so arrows + label can't overflow narrow phones */
    .hp-hero__indicator-label { font-size: 1rem; }
    .hp-hero__indicator-row { gap: 12px; }
}

/* Small phones in landscape: the viewport is too short for a 100vh hero with
   bottom-anchored content — the title collides with the header. Let the hero
   grow to fit its content and top-pad it clear of the transparent header. */
@media screen and (max-height: 500px) and (orientation: landscape) {
    /* Top-align the content (padded clear of the header) instead of bottom-anchoring
       it. min-height:100vh keeps it filling the viewport but the hero still grows
       if the content is taller than the (short) viewport, so nothing is clipped. */
    .hp-hero .hp-hero__inner { align-self: flex-start; padding-top: 78px; padding-bottom: 40px; }
    .hp-hero__title { font-size: 2rem; }
    .hp-hero__customers { margin-top: 22px; }
}

/* Customers block: stack the label + run the auto-scrolling logo marquee up to
   1024px — this covers mobile, tablet portrait AND iPad-mini landscape (1024px),
   so those get the carousel instead of the desktop side-by-side static logos. */
@media screen and (max-width: 1024px) {
    .hp-hero__inner .hp-hero__customers { display: flex; flex-direction: column; align-items: stretch; }
    .hp-hero__customers-label { font-size: 1.5rem; margin-bottom: 8px; }
    .hp-hero__customers-label span { display: inline; } /* "Our Customers" on one line */
    .hp-hero__logos { display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .hp-hero__logos-track { display: flex; width: max-content; max-width: none; justify-content: flex-start; animation: hero-logos-scroll 22s linear infinite; }
    .hp-hero__logos-set { flex-wrap: nowrap; gap: 40px; padding-right: 40px; justify-content: flex-start; flex-shrink: 0; }
    .hp-hero__logos-set[aria-hidden="true"] { display: flex; }
    .hp-hero__logos img { max-height: 30px; width: auto; }
}

/*
 * DW Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/DWCarousel2/DWCarousel2/blob/master/LICENSE
 */


/*
 *  DW Carousel - Custom
 */


.dw-item { transition: all 0.6s; }
.dw-item:not(.active) { opacity: 0; pointer-events: none; }

.dw-prev, .dw-next { display: flex; align-items: center; justify-content: center; height: 56px; width: 56px; background-color: #7a7a7a !important; }

.dw-prev:hover, .dw-next:hover { background-color: #474747 !important; }

.dw-prev i, .dw-next i { color: #fff; font-size: 1.5em; }


#review-carousel .dw-dots { position: static !important; transform: translate(0) !important }
.nav-controls { position: static !important; }

@media screen and (min-width:992px) {
  .dots-controls { position: static !important; }
}

@media screen and (max-width:992px) {
  .dots-controls { transform:translateX(-50%)!important; height:100%;  top:initial; justify-content:center; }
} 

/*
 *  DW Carousel - Core
 */

.dw-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; }
.dw-carousel .dw-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ }
.dw-carousel .dw-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.dw-carousel .dw-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); }
.dw-carousel .dw-wrapper,
.dw-carousel .dw-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); }
.dw-carousel .dw-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.dw-carousel .dw-item img { display: block; width: 100%; }
.dw-carousel .dw-nav.disabled,
.dw-carousel .dw-dots.disabled { display: none; }
.dw-carousel .dw-nav .dw-prev,
.dw-carousel .dw-nav .dw-next,
.dw-carousel .dw-dot { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.dw-carousel .dw-nav button.dw-prev,
.dw-carousel .dw-nav button.dw-next,
.dw-carousel button.dw-dot { background: none; color: inherit; border: none; padding: 0 !important; font: inherit; }
.dw-carousel.dw-loaded { display: block; }
.dw-carousel.dw-loading { opacity: 0; display: block; }
.dw-carousel.dw-hidden { opacity: 0; }
.dw-carousel.dw-refresh .dw-item { visibility: hidden; }
.dw-carousel.dw-drag .dw-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.dw-carousel.dw-grab { cursor: move; cursor: grab; }
.dw-carousel.dw-rtl { direction: rtl; }
.dw-carousel.dw-rtl .dw-item { float: right; }

/* No Js */
.no-js .dw-carousel { display: block; }

/*
 *  DW Carousel - Animate Plugin
 */
.dw-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; }

.dw-carousel .dw-animated-in { z-index: 0; }

.dw-carousel .dw-animated-out { z-index: 1; }

.dw-carousel .fadeOut { animation-name: fadeOut; }

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/*
 * 	DW Carousel - Auto Height Plugin
 */
.dw-height { transition: height 500ms ease-in-out; }

/*
 * 	DW Carousel - Lazy Load Plugin
 */
.dw-carousel .dw-item { /**
			This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
			calculation of the height of the dw-item that breaks page layouts
		 */ }
.dw-carousel .dw-item .dw-lazy { opacity: 0; transition: opacity 400ms ease; }
.dw-carousel .dw-item .dw-lazy[src^=""], .dw-carousel .dw-item .dw-lazy:not([src]) { max-height: 0; }
.dw-carousel .dw-item img.dw-lazy { transform-style: preserve-3d; }

/*
 * 	DW Carousel - Video Plugin
 */
.dw-carousel .dw-video-wrapper { position: relative; height: 100%; background: #000; }

.dw-carousel .dw-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("dw.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; }

.dw-carousel .dw-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); }

.dw-carousel .dw-video-playing .dw-video-tn,
.dw-carousel .dw-video-playing .dw-video-play-icon { display: none; }

.dw-carousel .dw-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; }

.dw-carousel .dw-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; }

.dw-theme .dw-nav { margin-top: 10px; text-align: center; -webkit-tap-highlight-color: transparent; }
.dw-theme .dw-nav [class*='dw-'] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px; }
.dw-theme .dw-nav [class*='dw-']:hover { background: #869791; color: #FFF; text-decoration: none; }
.dw-theme .dw-nav .disabled { opacity: 0.5; cursor: default; }

.dw-theme .dw-nav.disabled + .dw-dots { margin-top: 10px; }

.dw-theme .dw-dots { text-align: center; -webkit-tap-highlight-color: transparent; }
.dw-theme .dw-dots .dw-dot { display: inline-block; zoom: 1; *display: inline; }
.dw-theme .dw-dots .dw-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px; }
.dw-theme .dw-dots .dw-dot.active span, .dw-theme .dw-dots .dw-dot:hover span { background: #869791; }


*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.container, .left-container, .right-container { width: 100%; margin: 0 auto; padding: 0 15px; }
/* Content caps at 1470px (= Figma's 1440 content area + 2×15px gutters). Below that
   the container is fluid full-width, keeping the 15px gutters so content never touches
   the viewport edge. Applied site-wide for consistency (replaces the old stepped
   750/970/1500/1640 fixed widths). */
.container { max-width: 1470px; }

.container:before, .container:after, .section:before, .section:after { display: table; content: " "; }

@-ms-viewport { width: device-width; }

.rel {position:relative;}
.nowrap {white-space:nowrap;}
.dw-hide { display:none!important;}
.underline {text-decoration:underline;}
/*GRID*/
.dw-grid {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
}
/*GAP*/
.gap-5 { grid-gap: 5px; }
.gap-10 { grid-gap: 10px; }
.gap-15 { grid-gap: 15px; }
.gap-30 { grid-gap: 30px; }
.gap-45 { grid-gap: 45px; }
.gap-60 { grid-gap: 60px; }
.gap-75 { grid-gap: 75px; }

/*FLEXBOX*/
.flx { display: flex; }
.flx-col { flex-direction: column; }
.flx-row { flex-direction: row; }
.flx-col-rev { flex-direction: column-reverse; }
.flx-row-rev { flex-direction: row-reverse; }

.fl-wrap { flex-wrap: wrap; }

/*FLEXBOX*/
.xxs-al-start { align-items: center; }
.xxs-al-center { align-items: center; }
.xxs-al-end { align-items: flex-end; }

.xxs-ju-start { justify-content: flex-start; }
.xxs-ju-center { justify-content: center; }
.xxs-ju-end { justify-content: end; }
.xxs-ju-evenly { justify-content: space-evenly; }
.xxs-ju-around { justify-content: space-around; }
.xxs-ju-between { justify-content: space-between; }
.xxs-show {display:block;}

/*FLEX ITEM*/
.xxs-self-start { align-self: flex-start; }
.xxs-self-end { align-self: flex-end; }
.xxs-self-center { align-self: center; }
/*GRID-ITEM*/
.ju-self-end {justify-self:flex-end;}

.fl-grow { flex-grow: 1; }
.fl-no-shrink { flex-shrink: 0; }

.dw-xxs-10th { width: calc(100% / 10); }
.dw-xxs-9th { width: calc(100% / 9); }
.dw-xxs-8th { width: calc(100% / 8); }
.dw-xxs-7th { width: calc(100% / 7); }
.dw-xxs-5th { width: calc(100% / 5); }
.dw-xxs-12 { grid-column: span 12; }
.dw-xxs-11 { grid-column: span 11; }
.dw-xxs-10 { grid-column: span 10; }
.dw-xxs-9 { grid-column: span 9; }
.dw-xxs-8 { grid-column: span 8; }
.dw-xxs-7 { grid-column: span 7; }
.dw-xxs-6 { grid-column: span 6; }
.dw-xxs-5 { grid-column: span 5; }
.dw-xxs-4 { grid-column: span 4; }
.dw-xxs-3 { grid-column: span 3; }
.dw-xxs-2 { grid-column: span 2; }
.dw-xxs-1 { grid-column: span 1; }


/*MARGIN*/
.xxs-m-0 {margin:0!important;}

/*MOBILE*/


@media (min-width:500px) {
  .dw-xs-10th { width: calc(100% / 10); }
  .dw-xs-9th { width: calc(100% / 9); }
  .dw-xs-8th { width: calc(100% / 8); }
  .dw-xs-7th { width: calc(100% / 7); }
  .dw-xs-5th { width: calc(100% / 5); }
  .dw-xs-12 { grid-column: span 12; }
  .dw-xs-11 { grid-column: span 11; }
  .dw-xs-10 { grid-column: span 10; }
  .dw-xs-9 { grid-column: span 9; }
  .dw-xs-8 { grid-column: span 8; }
  .dw-xs-7 { grid-column: span 7; }
  .dw-xs-6 { grid-column: span 6; }
  .dw-xs-5 { grid-column: span 5; }
  .dw-xs-4 { grid-column: span 4; }
  .dw-xs-3 { grid-column: span 3; }
  .dw-xs-2 { grid-column: span 2; }
  .dw-xs-1 { grid-column: span 1; }

  /*MARGIN*/
  .xs-m-0 { margin: 0 !important; }

  /*FLEXBOX*/
  .xs-flx-col { flex-direction: column; }
  .xs-flx-row { flex-direction: row; }
  .xs-flx-col-rev { flex-direction: column-reverse; }
  .xs-flx-row-rev { flex-direction: row-reverse; }

  .xs-al-start { align-items: center; }
  .xs-al-center { align-items: center; }
  .xs-al-end { align-items: flex-end; }

  .xs-ju-start { justify-content: flex-start; }
  .xs-ju-center { justify-content: center; }
  .xs-ju-end { justify-content: end; }
  .xs-ju-evenly { justify-content: space-evenly; }
  .xs-ju-around { justify-content: space-around; }
  .xs-ju-between { justify-content: space-between; }
  .xs-show { display: block; }

  /*FLEX ITEM*/
  .xs-self-start { align-self: flex-start; }
  .xs-self-end { align-self: flex-end; }
  .xs-self-center { align-self: center; }
}

/*TABLET*/
@media (min-width:768px) {
  .dw-sm-10th { width: calc(100% / 10); }
  .dw-sm-9th { width: calc(100% / 9); }
  .dw-sm-8th { width: calc(100% / 8); }
  .dw-sm-7th { width: calc(100% / 7); }
  .dw-sm-5th { width: calc(100% / 5); }
  .dw-sm-12 { grid-column: span 12; }
  .dw-sm-11 { grid-column: span 11; }
  .dw-sm-10 { grid-column: span 10; }
  .dw-sm-9 { grid-column: span 9; }
  .dw-sm-8 { grid-column: span 8; }
  .dw-sm-7 { grid-column: span 7; }
  .dw-sm-6 { grid-column: span 6; }
  .dw-sm-5 { grid-column: span 5; }
  .dw-sm-4 { grid-column: span 4; }
  .dw-sm-3 { grid-column: span 3; }
  .dw-sm-2 { grid-column: span 2; }
  .dw-sm-1 { grid-column: span 1; }
  .visible-xs { display: none !important; }
  /*MARGIN*/
  .sm-m-0 { margin: 0 !important; }

  /*FLEXBOX*/
  .sm-flx-col { flex-direction: column; }
  .sm-flx-row { flex-direction: row; }
  .sm-flx-col-rev { flex-direction: column-reverse; }
  .sm-flx-row-rev { flex-direction: row-reverse; }

  .sm-al-start { align-items: center; }
  .sm-al-center { align-items: center; }
  .sm-al-end { align-items: flex-end; }

  .sm-ju-start { justify-content: flex-start; }
  .sm-ju-center { justify-content: center; }
  .sm-ju-end { justify-content: end; }
  .sm-ju-evenly { justify-content: space-evenly; }
  .sm-ju-around { justify-content: space-around; }
  .sm-ju-between { justify-content: space-between; }
  .sm-show {display:block!important;}
  .sm-hide { display: none!important; }

  /*FLEX ITEM*/
  .sm-self-start { align-self: flex-start; }
  .sm-self-end { align-self: flex-end; }
  .sm-self-center { align-self: center; }
}



/*SMALL DESKTOP*/
@media (min-width:992px) {
  .dw-md-10th { width: calc(100% / 10); }
  .dw-md-9th { width: calc(100% / 9); }
  .dw-md-8th { width: calc(100% / 8); }
  .dw-md-7th { width: calc(100% / 7); }
  .dw-md-5th { width: calc(100% / 5); }

  .dw-md-12 { grid-column: span 12; }
  .dw-md-11 { grid-column: span 11; }
  .dw-md-10 { grid-column: span 10; }
  .dw-md-9 { grid-column: span 9; }
  .dw-md-8 { grid-column: span 8; }
  .dw-md-7 { grid-column: span 7; }
  .dw-md-6 { grid-column: span 6; }
  .dw-md-5 { grid-column: span 5; }
  .dw-md-4 { grid-column: span 4; }
  .dw-md-3 { grid-column: span 3; }
  .dw-md-2 { grid-column: span 2; }
  .dw-md-1 { grid-column: span 1; }

  /*MARGIN*/
  .md-m-0 { margin: 0 !important; }

  /*FLEXBOX*/
  .md-flx-col { flex-direction: column; }
  .md-flx-row { flex-direction: row; }
  .md-flx-col-rev { flex-direction: column-reverse; }
  .md-flx-row-rev { flex-direction: row-reverse; }

  .md-al-start { align-items: center; }
  .md-al-center { align-items: center; }
  .md-al-end { align-items: flex-end; }

  .md-ju-start { justify-content: flex-start; }
  .md-ju-center { justify-content: center; }
  .md-ju-end { justify-content: end; }
  .md-ju-evenly { justify-content: space-evenly; }
  .md-ju-around { justify-content: space-around; }
  .md-ju-between { justify-content: space-between; }
  .md-show {display:block;}

  /*FLEX ITEM*/
  .md-self-start { align-self: flex-start; }
  .md-self-end { align-self: flex-end; }
  .md-self-center { align-self: center; }
}


/*DESKTOP*/

@media (min-width: 1230px) {
  .dw-lg-10th { width: calc(100% / 10); }
  .dw-lg-9th { width: calc(100% / 9); }
  .dw-lg-8th { width: calc(100% / 8); }
  .dw-lg-7th { width: calc(100% / 7); }
  .dw-lg-5th { width: calc(100% / 5); }

  .dw-lg-12 { grid-column: span 12; }
  .dw-lg-11 { grid-column: span 11; }
  .dw-lg-10 { grid-column: span 10; }
  .dw-lg-9 { grid-column: span 9; }
  .dw-lg-8 { grid-column: span 8; }
  .dw-lg-7 { grid-column: span 7; }
  .dw-lg-6 { grid-column: span 6; }
  .dw-lg-5 { grid-column: span 5; }
  .dw-lg-4 { grid-column: span 4; }
  .dw-lg-3 { grid-column: span 3; }
  .dw-lg-2 { grid-column: span 2; }
  .dw-lg-1 { grid-column: span 1; }

  /*MARGIN*/
  .lg-m-0 { margin: 0 !important; }

  /*FLEXBOX*/
  .lg-flx-col { flex-direction: column; }
  .lg-flx-row { flex-direction: row; }
  .lg-flx-col-rev { flex-direction: column-reverse; }
  .lg-flx-row-rev { flex-direction: row-reverse; }

  .lg-al-start { align-items: center; }
  .lg-al-center { align-items: center; }
  .lg-al-end { align-items: flex-end; }

  .lg-ju-start { justify-content: flex-start; }
  .lg-ju-center { justify-content: center; }
  .lg-ju-end { justify-content: end; }
  .lg-ju-evenly { justify-content: space-evenly; }
  .lg-ju-around { justify-content: space-around; }
  .lg-ju-between { justify-content: space-between; }
  .lg-show {display:block;}

  /*FLEX ITEM*/
  .lg-self-start { align-self: flex-start; }
  .lg-self-end { align-self: flex-end; }
  .lg-self-center { align-self: center; }
}


@media (min-width: 1671px) {
  .dw-xl-10th { width: calc(100% / 10); }
  .dw-xl-9th { width: calc(100% / 9); }
  .dw-xl-8th { width: calc(100% / 8); }
  .dw-xl-7th { width: calc(100% / 7); }
  .dw-xl-5th { width: calc(100% / 5); }

  .dw-xl-12 { grid-column: span 12; }
  .dw-xl-11 { grid-column: span 11; }
  .dw-xl-10 { grid-column: span 10; }
  .dw-xl-9 { grid-column: span 9; }
  .dw-xl-8 { grid-column: span 8; }
  .dw-xl-7 { grid-column: span 7; }
  .dw-xl-6 { grid-column: span 6; }
  .dw-xl-5 { grid-column: span 5; }
  .dw-xl-4 { grid-column: span 4; }
  .dw-xl-3 { grid-column: span 3; }
  .dw-xl-2 { grid-column: span 2; }
  .dw-xl-1 { grid-column: span 1; }

  /*MARGIN*/
  .xl-m-0 { margin: 0 !important; }

  /*FLEXBOX*/
  .xl-flx-col { flex-direction: column; }
  .xl-flx-row { flex-direction: row; }
  .xl-flx-col-rev { flex-direction: column-reverse; }
  .xl-flx-row-rev { flex-direction: row-reverse; }

  .xl-al-start { align-items: center; }
  .xl-al-center { align-items: center; }
  .xl-al-end { align-items: flex-end; }

  .xl-ju-start { justify-content: flex-start; }
  .xl-ju-center { justify-content: center; }
  .xl-ju-end { justify-content: end; }
  .xl-ju-evenly { justify-content: space-evenly; }
  .xl-ju-around { justify-content: space-around; }
  .xl-ju-between { justify-content: space-between; }
  .xl-show {display:block;}

  /*FLEX ITEM*/
  .xl-self-start { align-self: flex-start; }
  .xl-self-end { align-self: flex-end; }
  .xl-self-center { align-self: center; }
}


@media (min-width:1671px) {
  .dw-xxl-10th { width: calc(100% / 10); }
  .dw-xxl-9th { width: calc(100% / 9); }
  .dw-xxl-8th { width: calc(100% / 8); }
  .dw-xxl-7th { width: calc(100% / 7); }
  .dw-xxl-5th { width: calc(100% / 5); }

  .dw-xxl-12 { grid-column: span 12; }
  .dw-xxl-11 { grid-column: span 11; }
  .dw-xxl-10 { grid-column: span 10; }
  .dw-xxl-9 { grid-column: span 9; }
  .dw-xxl-8 { grid-column: span 8; }
  .dw-xxl-7 { grid-column: span 7; }
  .dw-xxl-6 { grid-column: span 6; }
  .dw-xxl-5 { grid-column: span 5; }
  .dw-xxl-4 { grid-column: span 4; }
  .dw-xxl-3 { grid-column: span 3; }
  .dw-xxl-2 { grid-column: span 2; }
  .dw-xxl-1 { grid-column: span 1; }

  /*MARGIN*/
  .xxl-m-0 { margin: 0 !important; }

  /*FLEXBOX*/
  .xxl-flx-col { flex-direction: column; }
  .xxl-flx-row { flex-direction: row; }
  .xxl-flx-col-rev { flex-direction: column-reverse; }
  .xxl-flx-row-rev { flex-direction: row-reverse; }

  .xxl-al-start { align-items: center; }
  .xxl-al-center { align-items: center; }
  .xxl-al-end { align-items: flex-end; }

  .xxl-ju-start { justify-content: flex-start; }
  .xxl-ju-center { justify-content: center; }
  .xxl-ju-end { justify-content: end; }
  .xxl-ju-evenly { justify-content: space-evenly; }
  .xxl-ju-around { justify-content: space-around; }
  .xxl-ju-between { justify-content: space-between; }
  .xxl-show {display:block;}

  /*FLEX ITEM*/
  .xxl-self-start { align-self: flex-start; }
  .xxl-self-end { align-self: flex-end; }
  .xxl-self-center { align-self: center; }

}

@media (min-width:1800px) {
  .container { margin: 0 auto!important; }
}


/*TEXT-ALIGN*/
.center-txt { text-align: center; }
.left-txt { text-align: left; }
.right-txt { text-align: right; }

/*MARGIN*/

.center-block { margin: 0 auto; }


.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-15 { margin: 15px; }
.m-30 { margin: 30px; }
.m-45 { margin: 45px; }
.m-60 { margin: 60px; }
.m-75 { margin: 75px; }

.my-5 { margin-top: 5px; margin-bottom: 5px; }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-15 { margin-top: 15px; margin-bottom: 15px; }
.my-30 { margin-top: 30px; margin-bottom: 30px; }
.my-45 { margin-top: 45px; margin-bottom: 45px; }
.my-60 { margin-top: 60px; margin-bottom: 60px; }
.my-75 { margin-top: 75px; margin-bottom: 75px; }

.mx-5 { margin-right: 5px; margin-left: 5px; }
.mx-10 { margin-right: 10px; margin-left: 10px; }
.mx-15 { margin-right: 15px; margin-left: 15px; }
.mx-30 { margin-right: 30px; margin-left: 30px; }
.mx-45 { margin-right: 45px; margin-left: 45px; }
.mx-60 { margin-right: 60px; margin-left: 60px; }
.mx-75 { margin-right: 75px; margin-left: 75px; }

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-30 { margin-top: 30px; }
.mt-45 { margin-top: 45px; }
.mt-60 { margin-top: 60px; }
.mt-75 { margin-top: 75px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-30 { margin-bottom: 30px; }
.mb-45 { margin-bottom: 45px; }
.mb-60 { margin-bottom: 60px; }
.mb-75 { margin-bottom: 75px; }

.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-30 { margin-right: 30px; }
.mr-45 { margin-right: 45px; }
.mr-60 { margin-right: 60px; }
.mr-75 { margin-right: 75px; }

.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-30 { margin-left: 30px; }
.ml-45 { margin-left: 45px; }
.ml-60 { margin-left: 60px; }
.ml-75 { margin-left: 75px; }

/*PADDING*/

.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-30 { padding: 30px; }
.p-45 { padding: 45px; }
.p-60 { padding: 60px; }
.p-75 { padding: 75px; }

.py-5 { padding-top: 5px; padding-bottom: 5px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }
.py-30 { padding-top: 30px; padding-bottom: 30px; }
.py-45 { padding-top: 45px; padding-bottom: 45px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.py-75 { padding-top: 75px; padding-bottom: 75px; }

.px-5 { padding-right: 5px; padding-left: 5px; }
.px-10 { padding-right: 10px; padding-left: 10px; }
.px-15 { padding-right: 15px; padding-left: 15px; }
.px-30 { padding-right: 30px; padding-left: 30px; }
.px-45 { padding-right: 45px; padding-left: 45px; }
.px-60 { padding-right: 60px; padding-left: 60px; }
.px-75 { padding-right: 75px; padding-left: 75px; }

.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-30 { padding-top: 30px; }
.pt-45 { padding-top: 45px; }
.pt-60 { padding-top: 60px; }
.pt-75 { padding-top: 75px; }

.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-30 { padding-bottom: 30px; }
.pb-45 { padding-bottom: 45px; }
.pb-60 { padding-bottom: 60px; }
.pb-75 { padding-bottom: 75px; }

.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-30 { padding-right: 30px; }
.pr-45 { padding-right: 45px; }
.pr-60 { padding-right: 60px; }
.pr-75 { padding-right: 75px; }

.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-30 { padding-left: 30px; }
.pl-45 { padding-left: 45px; }
.pl-60 { padding-left: 60px; }
.pl-75 { padding-left: 75px; }

/*FONT-SIZE*/
.fs-08 { font-size: 0.8rem; }
.fs-11 { font-size: 1.1rem; }
.fs-12 { font-size: 1.2rem; }
.fs-13 { font-size: 1.3rem; }
.fs-14 { font-size: 1.4rem; }
.fs-15 { font-size: 1.5rem; }
.fs-17 { font-size: 1.6rem; }
.fs-16 { font-size: 1.7rem; }
.fs-18 { font-size: 1.8rem; }
.fs-19 { font-size: 1.9rem; }
.fs-20 { font-size: 2.0rem; }
.fs-23 { font-size: 2.3rem; }
.fs-25 { font-size: 2.5rem; }
.fs-27 { font-size: 2.7rem; }
.fs-28 { font-size: 2.8rem; }
.fs-30 { font-size: 3.0rem; }
.fs-32 { font-size: 3.2rem; }
.fs-33 { font-size: 3.3rem; }
.fs-34 { font-size: 3.4rem; }
.fs-35 { font-size: 3.5rem; }
.fs-40 { font-size: 4rem; }
.fs-45 { font-size: 4.5rem; }

/*FONT-WEIGHT*/
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/*WIDTH*/
.w-full { width: 100% }
.w-fifth { grid-column: span 6 }
.max-w-cont { max-width: fit-cont; }
.max-w-10 { max-width: 10px; }
.max-w-20 { max-width: 20px; }
.max-w-30 { max-width: 30px; }
.max-w-40 { max-width: 40px; }
.max-w-50 { max-width: 50px; }
.max-w-60 { max-width: 60px; }
.max-w-70 { max-width: 70px; }
.max-w-80 { max-width: 80px; }
.max-w-90 { max-width: 90px; }
.max-w-100 { max-width: 100px; }
.max-w-110 { max-width: 110px; }
.max-w-120 { max-width: 120px; }
.max-w-130 { max-width: 130px; }
.max-w-140 { max-width: 140px; }
.max-w-150 { max-width: 150px; }
.max-w-160 { max-width: 160px; }
.max-w-170 { max-width: 170px; }
.max-w-180 { max-width: 180px; }
.max-w-190 { max-width: 190px; }
.max-w-200 { max-width: 200px; }
.max-w-210 { max-width: 210px; }
.max-w-220 { max-width: 220px; }
.max-w-230 { max-width: 230px; }
.max-w-240 { max-width: 240px; }
.max-w-250 { max-width: 250px; }
.max-w-260 { max-width: 260px; }
.max-w-270 { max-width: 270px; }
.max-w-280 { max-width: 280px; }
.max-w-290 { max-width: 290px; }
.max-w-300 { max-width: 300px; }
.max-w-310 { max-width: 310px; }
.max-w-320 { max-width: 320px; }
.max-w-330 { max-width: 330px; }
.max-w-340 { max-width: 340px; }
.max-w-350 { max-width: 350px; }
.max-w-360 { max-width: 360px; }
.max-w-370 { max-width: 370px; }
.max-w-380 { max-width: 380px; }
.max-w-390 { max-width: 390px; }
.max-w-400 { max-width: 400px; }
.max-w-410 { max-width: 410px; }
.max-w-420 { max-width: 420px; }
.max-w-430 { max-width: 430px; }
.max-w-440 { max-width: 440px; }
.max-w-450 { max-width: 450px; }
.max-w-460 { max-width: 460px; }
.max-w-470 { max-width: 470px; }
.max-w-480 { max-width: 480px; }
.max-w-490 { max-width: 490px; }
.max-w-500 { max-width: 500px; }
.max-w-510 { max-width: 510px; }
.max-w-520 { max-width: 520px; }
.max-w-530 { max-width: 530px; }
.max-w-540 { max-width: 540px; }
.max-w-550 { max-width: 550px; }
.max-w-560 { max-width: 560px; }
.max-w-570 { max-width: 570px; }
.max-w-580 { max-width: 580px; }
.max-w-590 { max-width: 590px; }
.max-w-600 { max-width: 600px; }
.max-w-610 { max-width: 610px; }
.max-w-620 { max-width: 620px; }
.max-w-630 { max-width: 630px; }
.max-w-640 { max-width: 640px; }
.max-w-650 { max-width: 650px; }
.max-w-660 { max-width: 660px; }
.max-w-670 { max-width: 670px; }
.max-w-680 { max-width: 680px; }
.max-w-690 { max-width: 690px; }
.max-w-700 { max-width: 700px; }
.max-w-710 { max-width: 710px; }
.max-w-720 { max-width: 720px; }
.max-w-730 { max-width: 730px; }
.max-w-740 { max-width: 740px; }
.max-w-750 { max-width: 750px; }
.max-w-760 { max-width: 760px; }
.max-w-770 { max-width: 770px; }
.max-w-780 { max-width: 780px; }
.max-w-790 { max-width: 790px; }
.max-w-800 { max-width: 800px; }
.max-w-810 { max-width: 810px; }
.max-w-820 { max-width: 820px; }
.max-w-830 { max-width: 830px; }
.max-w-840 { max-width: 840px; }
.max-w-850 { max-width: 850px; }
.max-w-860 { max-width: 860px; }
.max-w-870 { max-width: 870px; }
.max-w-880 { max-width: 880px; }
.max-w-890 { max-width: 890px; }
.max-w-900 { max-width: 900px; }
.max-w-910 { max-width: 910px; }
.max-w-920 { max-width: 920px; }
.max-w-930 { max-width: 930px; }
.max-w-940 { max-width: 940px; }
.max-w-950 { max-width: 950px; }
.max-w-960 { max-width: 960px; }
.max-w-970 { max-width: 970px; }
.max-w-980 { max-width: 980px; }
.max-w-990 { max-width: 990px; }
.max-w-1000 { max-width: 1000px; }
.max-w-1010 { max-width: 1010px; }
.max-w-1020 { max-width: 1020px; }
.max-w-1030 { max-width: 1030px; }
.max-w-1040 { max-width: 1040px; }
.max-w-1050 { max-width: 1050px; }
.max-w-1060 { max-width: 1060px; }
.max-w-1070 { max-width: 1070px; }
.max-w-1080 { max-width: 1080px; }
.max-w-1090 { max-width: 1090px; }
.max-w-1100 { max-width: 1100px; }
.max-w-1110 { max-width: 1110px; }
.max-w-1120 { max-width: 1120px; }
.max-w-1130 { max-width: 1130px; }
.max-w-1140 { max-width: 1140px; }
.max-w-1150 { max-width: 1150px; }
.max-w-1160 { max-width: 1160px; }
.max-w-1170 { max-width: 1170px; }
.max-w-1180 { max-width: 1180px; }
.max-w-1190 { max-width: 1190px; }
.max-w-1200 { max-width: 1200px; }
.max-w-1210 { max-width: 1210px; }
.max-w-1220 { max-width: 1220px; }
.max-w-1230 { max-width: 1230px; }
.max-w-1240 { max-width: 1240px; }
.max-w-1250 { max-width: 1250px; }
.max-w-1260 { max-width: 1260px; }
.max-w-1270 { max-width: 1270px; }
.max-w-1280 { max-width: 1280px; }
.max-w-1290 { max-width: 1290px; }
.max-w-1300 { max-width: 1300px; }
.max-w-1310 { max-width: 1310px; }
.max-w-1320 { max-width: 1320px; }
.max-w-1330 { max-width: 1330px; }
.max-w-1340 { max-width: 1340px; }
.max-w-1350 { max-width: 1350px; }
.max-w-1360 { max-width: 1360px; }
.max-w-1370 { max-width: 1370px; }
.max-w-1380 { max-width: 1380px; }
.max-w-1390 { max-width: 1390px; }
.max-w-1400 { max-width: 1400px; }
.max-w-1410 { max-width: 1410px; }
.max-w-1420 { max-width: 1420px; }
.max-w-1430 { max-width: 1430px; }
.max-w-1440 { max-width: 1440px; }
.max-w-1450 { max-width: 1450px; }
.max-w-1460 { max-width: 1460px; }
.max-w-1470 { max-width: 1470px; }
.max-w-1480 { max-width: 1480px; }
.max-w-1490 { max-width: 1490px; }
.max-w-1500 { max-width: 1500px; }
.max-w-1510 { max-width: 1510px; }
.max-w-1520 { max-width: 1520px; }
.max-w-1530 { max-width: 1530px; }
.max-w-1540 { max-width: 1540px; }
.max-w-1550 { max-width: 1550px; }
.max-w-1560 { max-width: 1560px; }
.max-w-1570 { max-width: 1570px; }
.max-w-1580 { max-width: 1580px; }
.max-w-1590 { max-width: 1590px; }
.max-w-1600 { max-width: 1600px; }
.max-w-1610 { max-width: 1610px; }
.max-w-1620 { max-width: 1620px; }
.max-w-1630 { max-width: 1630px; }
.max-w-1640 { max-width: 1640px; }
.max-w-1650 { max-width: 1650px; }
.max-w-1660 { max-width: 1660px; }
.max-w-1670 { max-width: 1670px; }
.max-w-1680 { max-width: 1680px; }
.max-w-1690 { max-width: 1690px; }
.max-w-1700 { max-width: 1700px; }
.max-w-1710 { max-width: 1710px; }
.max-w-1720 { max-width: 1720px; }
.max-w-1730 { max-width: 1730px; }
.max-w-1740 { max-width: 1740px; }
.max-w-1750 { max-width: 1750px; }
.max-w-1760 { max-width: 1760px; }
.max-w-1770 { max-width: 1770px; }
.max-w-1780 { max-width: 1780px; }
.max-w-1790 { max-width: 1790px; }
.max-w-1800 { max-width: 1800px; }
.max-w-1810 { max-width: 1810px; }
.max-w-1820 { max-width: 1820px; }
.max-w-1830 { max-width: 1830px; }
.max-w-1840 { max-width: 1840px; }
.max-w-1850 { max-width: 1850px; }
.max-w-1860 { max-width: 1860px; }
.max-w-1870 { max-width: 1870px; }
.max-w-1880 { max-width: 1880px; }
.max-w-1890 { max-width: 1890px; }
.max-w-1900 { max-width: 1900px; }
.max-w-1910 { max-width: 1910px; }
.max-w-1920 { max-width: 1920px; }
.max-w-1930 { max-width: 1930px; }
.max-w-1940 { max-width: 1940px; }
.max-w-1950 { max-width: 1950px; }
.max-w-1960 { max-width: 1960px; }
.max-w-1970 { max-width: 1970px; }
.max-w-1980 { max-width: 1980px; }
.max-w-1990 { max-width: 1990px; }
.max-w-2000 { max-width: 2000px; }
.max-w-2010 { max-width: 2010px; }
.max-w-2020 { max-width: 2020px; }
.max-w-2030 { max-width: 2030px; }
.max-w-2040 { max-width: 2040px; }
.max-w-2050 { max-width: 2050px; }
.max-w-2060 { max-width: 2060px; }
.max-w-2070 { max-width: 2070px; }
.max-w-2080 { max-width: 2080px; }
.max-w-2090 { max-width: 2090px; }


/*HEIGHT*/
.vh-100 { height: 100vh; }
.vh-75 { height: 75vh; }
.vh-50 { height: 50vh; }
.vh-25 { height: 25vh; }
.min-h-1 { min-height: 1px; }
.min-h-2 { min-height: 2px; }
.min-h-10 { min-height: 10px; }
.min-h-15 { min-height: 15px }
.min-h-20 { min-height: 20px }
.min-h-25 { min-height: 25px }
.min-h-30 { min-height: 30px }
.min-h-35 { min-height: 35px }
.min-h-40 { min-height: 40px }
.min-h-45 { min-height: 45px }
.min-h-50 { min-height: 50px }
.min-h-55 { min-height: 55px }
.min-h-60 { min-height: 60px }
.min-h-65 { min-height: 65px }
.min-h-70 { min-height: 70px }
.min-h-75 { min-height: 75px }
.min-h-80 { min-height: 80px }
.min-h-85 { min-height: 85px }
.min-h-20 { min-height: 20px; }
.min-h-105 { min-height: 105px; }
.min-h-120 { min-height: 120px; }
.min-h-210 { min-height: 210px; }
.min-h-220 { min-height: 220px; }
.min-h-230 { min-height: 230px; }
.min-h-250 { min-height: 250px; }
.min-h-270 { min-height: 270px; }
.min-h-500 { min-height: 500px; }
.min-h-280 { min-height: 280px; }
.h-full { height: 100% }


/*BORDER RADIUS*/
.rad-0 { border-radius: 0px; }
.rad-5 { border-radius: 5px; }
.rad-10 { border-radius: 10px; }
.rad-20 { border-radius: 20px; }