/* =========================================================
   Milestone Drywall — theme styles
   1. Fonts   2. Base   3. Hover/focus (hoisted from inline)
   4. Responsive layer   5. Accessibility / motion
   ========================================================= */

/* ---------- 1. FONTS (self-hosted, no Google request) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-04.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-05.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-06.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-07.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-08.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-04.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-05.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-06.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-07.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-08.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-04.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-05.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-06.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-07.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-08.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- 2. BASE ---------- */
/* Font stacks are variables so they can be swapped from the Customizer
   without touching a single template. */
:root{
  --font-head:'Oswald',Impact,'Haettenschweiler',sans-serif;
  --font-body:'Archivo','Segoe UI',system-ui,sans-serif;
  /* Overwritten by JS with the real measured header height. The default
     matches a 120px logo plus its 22px padding, so content clears the header
     even before the script runs. */
  --head-h:164px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-body);color:#161a26;background:#11131e;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit}
@keyframes floatDot{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes crossFade{0%,16%{opacity:1}36%,80%{opacity:0}96%,100%{opacity:1}}
@keyframes scrollx{to{transform:translateX(-50%)}}

.ms-skip{position:absolute;left:-9999px;top:0;z-index:999;background:#BC3A33;color:#fff;padding:12px 20px;font-weight:600}
.ms-skip:focus{left:0}
html{scroll-behavior:smooth}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid #BC3A33;outline-offset:2px}

/* service card fill — was a JS mouseenter handler, now pure CSS */
.ms-svc:hover{--fill:translateY(0%);--txt:#f4f1ea}

/* ---------- 3. HOVER / FOCUS (hoisted from style-hover attrs) ---------- */
.x1:hover{color:var(--accent,#BC3A33)}
.x2:hover{color:var(--accent,#BC3A33)}
.x3:hover{color:var(--accent,#BC3A33)}
.x4:hover{color:var(--accent,#BC3A33)}
.x5:hover{color:var(--accent,#BC3A33)}
.x6:hover{filter:brightness(1.07);transform:translateY(-1px)}
.x7:hover{filter:brightness(1.07);transform:translateY(-2px)}
.x8:hover{background:rgba(255,255,255,0.12)}
.x9:hover{border-color:var(--accent,#BC3A33);background:rgba(188,58,51,0.07)}
.x10:focus{border-color:var(--accent,#BC3A33);outline:none}
.x11:focus{border-color:var(--accent,#BC3A33);outline:none}
.x12:focus{border-color:var(--accent,#BC3A33);outline:none}
.x13:focus{border-color:var(--accent,#BC3A33);outline:none}
.x14:hover{filter:brightness(1.06)}
.x15:hover{color:var(--accent,#BC3A33)}
.x16:hover{color:var(--accent,#BC3A33)}
.x17:hover{color:var(--accent,#BC3A33)}
.x18:hover{color:var(--accent,#BC3A33)}
.x19:hover{color:var(--accent,#BC3A33)}
.x20:hover{color:var(--accent,#BC3A33)}
/* ---------- 4. RESPONSIVE LAYER (authored — the original had none) ----------
   !important is required: the design carries all layout in inline
   style attributes, which otherwise outrank any stylesheet rule. */

/* mobile nav */
.ms-burger{display:none;width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:space-between}
.ms-burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.ms-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.ms-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.ms-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

@media (max-width:1100px){
  .g1{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:980px){
  .g2{grid-template-columns:1fr!important;gap:36px!important}
}
@media (max-width:900px){
  .ms-burger{display:flex}
  .ms-nav{display:none!important;position:absolute!important;top:100%;left:16px;right:16px;
          flex-direction:column!important;align-items:stretch!important;gap:0!important;
          background:#161a26;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px}
  .ms-nav.is-open{display:flex!important}
  .ms-nav a{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
  .ms-nav a:last-child{border-bottom:0}
  .g5{grid-template-columns:1fr 1fr!important}
  .g6{grid-template-columns:1fr!important;gap:40px!important}
}
@media (max-width:760px){
  /* The slider is excluded: it pads its own content, and padding the
     section would inset the full-bleed background images. */
  section:not(.ms-slider){padding-left:20px!important;padding-right:20px!important}
  footer{padding-left:20px!important;padding-right:20px!important}
  .g8{grid-template-columns:1fr!important;gap:32px!important}
  /* #top used to be the original static hero. It is the slider now, which
     sizes itself — the old min-height:auto!important collapsed it to nothing
     on phones. */
  .g3{gap:12px!important}
}
@media (max-width:620px){
  .g1{grid-template-columns:1fr!important}
  .g5{grid-template-columns:1fr!important;grid-auto-rows:200px!important}
}
@media (max-width:520px){
  .g7{grid-template-columns:1fr!important}
}
/* stop iOS zooming the form on focus */
@media (max-width:760px){
  input,select,textarea{font-size:16px!important}
}

/* ---------- 5. MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important}
}

/* ---------- 6. INTERIOR PAGES ----------
   Editor content on About / Services / Contact pages inherits the site's
   typography without any per-page styling. */
.ms-navlink{color:inherit}
.ms-navlink:hover{color:var(--accent,#BC3A33)}
.ms-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px}
.ms-menu li{margin:0;padding:0}
.ms-menu .current-menu-item > a{color:var(--accent,#BC3A33)}
@media (max-width:900px){
  .ms-menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .ms-menu li{border-bottom:1px solid rgba(255,255,255,.07)}
  .ms-menu li:last-child{border-bottom:0}
  .ms-menu a{display:block;padding:14px 16px}
}

.ms-prose{color:#2b3040;font-size:17px;line-height:1.7;max-width:72ch}
.ms-prose > *:first-child{margin-top:0}
.ms-prose h2{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
             font-size:clamp(24px,3vw,34px);line-height:1.1;color:#161a26;margin:48px 0 16px}
.ms-prose h3{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
             font-size:clamp(19px,2.2vw,23px);color:#161a26;margin:34px 0 12px}
.ms-prose p{margin:0 0 20px}
.ms-prose a{color:var(--accent,#BC3A33);text-decoration:underline;text-underline-offset:3px}
.ms-prose ul,.ms-prose ol{margin:0 0 22px;padding-left:22px}
.ms-prose li{margin-bottom:9px}
.ms-prose blockquote{margin:30px 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent,#BC3A33);
                     font-size:19px;line-height:1.55;color:#161a26}
.ms-prose img{margin:28px 0;border:1px solid #ddd6c8}
.ms-prose hr{border:0;border-top:1px solid #ddd6c8;margin:40px 0}
.ms-prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.ms-prose th,.ms-prose td{text-align:left;padding:11px 12px;border-bottom:1px solid #ddd6c8}
.ms-prose th{font-family:var(--font-body);font-size:11px;letter-spacing:.12em;
             text-transform:uppercase;color:#6b7280}

/* ---------- 7. STICKY HEADER ----------
   The header carries position:absolute inline, so the sticky variant needs
   !important to win. It starts transparent over the hero and goes solid once
   the page scrolls. */
body.ms-sticky .ms-header{position:fixed!important;transition:background .3s ease,box-shadow .3s ease,padding .3s ease}
body.ms-sticky .ms-header > div{transition:padding .3s ease}
body.ms-sticky .ms-header.is-stuck{background:rgba(17,19,30,.94);box-shadow:0 1px 0 rgba(255,255,255,.07),0 10px 30px -18px rgba(0,0,0,.8)}
@supports (backdrop-filter:blur(8px)){
  body.ms-sticky .ms-header.is-stuck{background:rgba(17,19,30,.78);backdrop-filter:blur(10px)}
}
body.ms-sticky .ms-header.is-stuck > div{padding-top:12px;padding-bottom:12px}
/* anchor targets must clear the fixed bar */
body.ms-sticky{scroll-padding-top:calc(var(--head-h,164px) + 16px)}
body.ms-sticky section[id]{scroll-margin-top:calc(var(--head-h,164px) + 8px)}
@media (max-width:760px){
  body.ms-sticky{scroll-padding-top:calc(var(--head-h,96px) + 12px)}
  body.ms-sticky section[id]{scroll-margin-top:calc(var(--head-h,96px) + 6px)}
}

/* ---------- 8. HERO IMAGES + KEN BURNS ----------
   Layout lives here rather than inline so the cross-fade and the slow zoom
   can be composed as two animations on the same element. */
.ms-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
             object-position:center;user-select:none;pointer-events:none}
.ms-hero-b{animation:crossFade var(--anim,10s) ease-in-out infinite}

@keyframes ken-burns{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.18) translate3d(-1.4%,-1%,0)}
}
@keyframes ken-burns-alt{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.18) translate3d(1.4%,.9%,0)}
}
body.ms-kb .ms-hero-img{will-change:transform;backface-visibility:hidden;transform-origin:center}
body.ms-kb .ms-hero-a{animation:ken-burns var(--kb,15s) ease-out infinite alternate}
body.ms-kb .ms-hero-b{animation:crossFade var(--anim,10s) ease-in-out infinite,
                                ken-burns-alt var(--kb,15s) ease-out infinite alternate}

/* Section 5 already zeroes every animation under prefers-reduced-motion,
   which covers both the cross-fade and the zoom. */

/* ---------- 9. PROJECT GALLERY ---------- */
.ms-gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:228px;gap:14px}
.ms-cell{position:relative;overflow:hidden;border-radius:3px;border:1px solid rgba(255,255,255,0.08)}
.ms-cell--wide{grid-row:span 2}
.ms-tile{position:absolute;inset:0;display:block;cursor:zoom-in}
.ms-tile--empty{cursor:default}
.ms-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
             transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.ms-cell:hover .ms-tile-img{transform:scale(1.06)}
.ms-tile-ph{position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,#1a1e2b,#1a1e2b 12px,#1e222f 12px,#1e222f 24px)}
@media (max-width:900px){.ms-gallery{grid-template-columns:1fr 1fr}}
@media (max-width:620px){
  .ms-gallery{grid-template-columns:1fr;grid-auto-rows:200px}
  .ms-cell--wide{grid-row:span 1}
}

/* lightbox */
.ms-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
       background:rgba(8,9,14,.93);padding:24px}
.ms-lb.is-open{display:flex}
.ms-lb figure{margin:0;max-width:min(1200px,94vw);max-height:88vh;display:flex;
              flex-direction:column;align-items:center;gap:14px}
.ms-lb img{max-width:100%;max-height:76vh;object-fit:contain;border-radius:3px}
.ms-lb figcaption{color:#f4f1ea;font-family:var(--font-head);text-transform:uppercase;
                  font-size:17px;letter-spacing:.02em;text-align:center}
.ms-lb figcaption span{display:block;font-family:var(--font-body);text-transform:uppercase;
                       font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.6);margin-bottom:5px}
.ms-lb button{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
              color:#f4f1ea;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:22px;
              line-height:1;display:flex;align-items:center;justify-content:center}
.ms-lb button:hover{background:rgba(255,255,255,.16)}
.ms-lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.ms-lb-next{right:20px;top:50%;transform:translateY(-50%)}
.ms-lb-close{top:20px;right:20px}
.ms-lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
             color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.14em}
@media (max-width:620px){
  .ms-lb-prev{left:8px}.ms-lb-next{right:8px}
  .ms-lb button{width:42px;height:42px}
}

/* ---------- 10. TRUST BAR ---------- */
.ms-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ms-trust-item{display:flex;align-items:flex-start;gap:10px;color:#c8ccd3}
.ms-trust-check{color:var(--accent,#BC3A33);font-size:15px;line-height:1.35;flex:0 0 auto}
.ms-trust-label{display:block;font-family:var(--font-head);text-transform:uppercase;
                font-size:14px;letter-spacing:.03em;color:#f4f1ea}
.ms-trust-note{display:block;font-size:12.5px;color:#8C9197;margin-top:2px}
@media (max-width:900px){.ms-trust{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ms-trust{grid-template-columns:1fr;gap:14px}}

/* ---------- 11. BEFORE / AFTER SLIDER ---------- */
.ms-compare{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/10;
            overflow:hidden;border-radius:4px;border:1px solid rgba(255,255,255,.1);
            user-select:none;touch-action:pan-y}
.ms-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                pointer-events:none;-webkit-user-drag:none}
.ms-compare-clip{position:absolute;inset:0;width:var(--pos,50%);overflow:hidden}
.ms-compare-clip img{width:1000px;max-width:none}
.ms-compare-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;
                   background:#f4f1ea;transform:translateX(-1px);pointer-events:none}
.ms-compare-handle span{position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%;background:#f4f1ea;
  box-shadow:0 4px 16px rgba(0,0,0,.4)}
.ms-compare-handle span::before,.ms-compare-handle span::after{
  content:'';position:absolute;top:50%;width:0;height:0;border-block:5px solid transparent}
.ms-compare-handle span::before{left:11px;border-right:7px solid #161a26;transform:translateY(-50%)}
.ms-compare-handle span::after{right:11px;border-left:7px solid #161a26;transform:translateY(-50%)}
.ms-compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
                  cursor:ew-resize;appearance:none;background:transparent}
.ms-compare-range:focus-visible{opacity:1;outline:2px solid var(--accent,#BC3A33);outline-offset:-2px}
.ms-compare-tag{position:absolute;bottom:16px;font-family:var(--font-body);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#f4f1ea;background:rgba(12,13,22,.62);
  padding:6px 12px;border-radius:2px;pointer-events:none}
.ms-compare-tag--l{left:16px}
.ms-compare-tag--r{right:16px}
@media (max-width:620px){.ms-compare{aspect-ratio:4/3}}

/* ---------- 12. REVIEWS ---------- */
.ms-reviews{max-width:1100px;margin:0 auto}

/* ---------- 13. STICKY MOBILE CALL BAR ---------- */
.ms-callbar{display:none}
@media (max-width:760px){
  .ms-callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;
              z-index:900;border-top:1px solid rgba(255,255,255,.12);
              padding-bottom:env(safe-area-inset-bottom,0)}
  .ms-callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;
                font-family:var(--font-head);text-transform:uppercase;letter-spacing:.04em;
                font-size:14.5px}
  .ms-callbar-call{background:#161a26;color:#f4f1ea}
  .ms-callbar-cta{background:var(--accent,#BC3A33);color:#fff}
  body.ms-hascallbar{padding-bottom:56px}
}

/* ---------- 14. LOCATION / MAP ---------- */
.ms-loc{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:stretch}
.ms-loc-map{position:relative;min-height:380px;border:1px solid rgba(255,255,255,.1);
            border-radius:4px;overflow:hidden;background:#1a1e2b}
.ms-loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
                   filter:grayscale(1) contrast(1.05) brightness(.92);transition:filter .4s ease}
.ms-loc-map:hover iframe{filter:none}
.ms-loc-info{background:#1a1e2b;border:1px solid rgba(255,255,255,.08);border-radius:4px;
             padding:28px 26px;display:flex;flex-direction:column;gap:16px}
.ms-loc-row{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;color:#c8ccd3}
.ms-loc-key{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
            color:#8C9197;min-width:64px;padding-top:3px;flex:0 0 auto}
.ms-loc-val{line-height:1.5}
.ms-loc-dir{margin-top:auto;padding-top:8px;font-family:var(--font-head);text-transform:uppercase;
            letter-spacing:.04em;font-size:14px;color:var(--accent,#BC3A33)}
.ms-loc-dir:hover{filter:brightness(1.15)}
@media (max-width:900px){
  .ms-loc{grid-template-columns:1fr}
  .ms-loc-map{min-height:300px}
}

/* ---------- 15. ACCREDITATION BADGES ---------- */
.ms-badges{margin-top:22px}
.ms-badges-head{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.18em;
                text-transform:uppercase;color:#6b7079;margin-bottom:10px}
.ms-badges-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ms-badges-row img{max-height:56px;width:auto;border:0}
.ms-badges-row a{display:inline-flex;opacity:.92;transition:opacity .25s ease}
.ms-badges-row a:hover{opacity:1}

/* ---------- 16. THIRD-PARTY HERO SLIDER ---------- */
.ms-hero-slider{position:relative;width:100%;overflow:hidden}
body.ms-sticky .ms-hero-slider{--ms-slider-note:"header overlays this section"}

/* ---------- 17. HERO SLIDER ---------- */
.ms-slider{position:relative;width:100%;min-height:88vh;display:flex;align-items:stretch;overflow:hidden;background:#11131e}

/* Slides are stacked with grid rather than absolute positioning, so the tallest
   slide gives the section its height. Previously everything inside was absolute
   and the hero depended entirely on min-height — which collapsed it to zero on
   any breakpoint where min-height was relaxed. */
.ms-slides{position:relative;display:grid;width:100%;min-height:100%;align-self:stretch}
/* position:relative matters: the background and scrim are absolutely
   positioned and must anchor to the slide, not to the container. Without it
   they anchor higher up and leave strips of bare background above and below. */
.ms-slide{grid-area:1/1;position:relative;display:flex;align-items:center;
          min-height:100%;width:100%;
          opacity:0;visibility:hidden;
          transition:opacity .9s cubic-bezier(.22,.61,.36,1),visibility .9s}
.ms-slide.is-active{opacity:1;visibility:visible}
/* Deliberately oversized. The Ken Burns animation both scales and drifts the
   image; on a large viewport that drift is a large number of pixels, and a
   flush-fitting element lets the slider background show at the edge mid-cycle.
   Overhanging by 6% on every side means the drift can never reach an edge.
   The slider has overflow:hidden, so the overhang is clipped. */
.ms-slide-bg{position:absolute;inset:-6%;background-size:cover;background-position:center;
             background-color:#11131e;transform:scale(1.04);transform-origin:center;
             will-change:transform}
.ms-slide.is-active .ms-slide-bg{animation:ken-burns var(--kb,15s) ease-out infinite alternate}
.ms-slide-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,13,22,.92) 0%,rgba(12,13,22,.72) 46%,rgba(12,13,22,.35) 100%)}

.ms-slide-inner{position:relative;max-width:1240px;margin:0 auto;width:100%;
                padding:calc(var(--head-h,164px) + 44px) 32px 96px;
                opacity:0;transform:translateY(22px)}
.ms-slide.is-active .ms-slide-inner{animation:slideUp .8s cubic-bezier(.22,.61,.36,1) .15s forwards}
@keyframes slideUp{to{opacity:1;transform:none}}

.ms-slide-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;font-family:var(--font-body);
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent,#BC3A33);margin-bottom:22px}
.ms-slide-eyebrow .ms-dot{width:7px;height:7px;border-radius:50%;background:var(--accent,#BC3A33);
  animation:floatDot 2.4s ease-in-out infinite}
.ms-slide-title{font-family:var(--font-head);font-weight:600;color:#fff;
  font-size:clamp(42px,6vw,82px);line-height:.98;letter-spacing:-.01em;margin:0}
.ms-slide-title > span:not(.ms-split){color:var(--accent,#BC3A33)}
.ms-slide-title .ms-split span:not(.ms-word):not(.ms-ch){color:var(--accent,#BC3A33)}
.ms-slide-intro{color:rgba(255,255,255,.84);font-size:clamp(17px,1.6vw,21px);line-height:1.58;
  max-width:560px;margin:26px 0 0}
.ms-slide-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.ms-btn{display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:16px;padding:15px 28px;border-radius:11px;
  transition:transform .25s ease,background .25s ease,border-color .25s ease}
.ms-btn--primary{background:var(--accent,#BC3A33);color:#fff}
.ms-btn--primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ms-btn--ghost{border:1px solid rgba(255,255,255,.28);color:#f4f1ea}
.ms-btn--ghost:hover{border-color:#f4f1ea;background:rgba(255,255,255,.06)}

.ms-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:26px;line-height:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#f4f1ea;
  display:flex;align-items:center;justify-content:center;transition:background .25s ease}
.ms-slider-arrow:hover{background:rgba(255,255,255,.18)}
.ms-slider-prev{left:22px}
.ms-slider-next{right:22px}

.ms-slider-dots{position:absolute;left:32px;bottom:34px;z-index:6;display:flex;gap:10px}
.ms-slider-dot{width:34px;height:4px;padding:0;border:0;cursor:pointer;background:rgba(255,255,255,.28);
  border-radius:2px;overflow:hidden;position:relative}
.ms-slider-dot span{position:absolute;inset:0;width:0;background:var(--accent,#BC3A33)}
.ms-slider-dot.is-active span{width:100%;transition:width linear}

@media (max-width:900px){
  .ms-slider-arrow{width:44px;height:44px;font-size:22px}
  .ms-slider-prev{left:10px}.ms-slider-next{right:10px}
}
@media (max-width:760px){
  /* svh accounts for mobile browser chrome; vh is the fallback. */
  .ms-slider{min-height:76vh;min-height:76svh}
  .ms-slide-inner{padding:calc(var(--head-h,120px) + 30px) 20px 84px}
  .ms-slide-scrim{background:linear-gradient(180deg,rgba(12,13,22,.72),rgba(12,13,22,.92))}
  .ms-slider-dots{left:20px;bottom:26px}
  .ms-slider-arrow{top:auto;bottom:24px;transform:none}
  .ms-slider-prev{left:auto;right:74px}
  .ms-slider-next{right:20px}
}
@media (prefers-reduced-motion:reduce){
  .ms-slide-bg,.ms-slide.is-active .ms-slide-bg{animation:none;transform:none}
  .ms-slide-inner{opacity:1;transform:none}
}

/* Empty cells that close the services border grid on partial rows. */
@media (max-width:1100px){.ms-svc-filler{display:none}}

/* ---------- 18. HEADER PHONE NUMBERS ---------- */
.ms-head-phones{display:flex;align-items:stretch;gap:10px;flex:0 0 auto}
.ms-head-phone{display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:9px 16px;border-radius:9px;border:1px solid rgba(255,255,255,.18);
  transition:background .25s ease,border-color .25s ease}
.ms-head-phone:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.36)}
.ms-head-phone.is-primary{background:var(--accent,#BC3A33);border-color:transparent}
.ms-head-phone.is-primary:hover{filter:brightness(1.08);background:var(--accent,#BC3A33)}
.ms-head-phone-label{font-family:var(--font-body);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1}
.ms-head-phone.is-primary .ms-head-phone-label{color:rgba(255,255,255,.85)}
.ms-head-phone-num{font-family:var(--font-head);font-weight:600;font-size:15px;
  letter-spacing:.02em;color:#f4f1ea;line-height:1.15}

/* Two numbers plus a 120px logo is too much below desktop. Drop the
   secondary first, then both — the sticky call bar covers phones. */
@media (max-width:1180px){
  .ms-head-phone:not(.is-primary){display:none}
}
@media (max-width:900px){
  .ms-head-phones{display:none}
}

/* ---------- 19. ENTRANCE ANIMATIONS ----------
   The Elementor pattern: hide with visibility, then play a named keyframe
   animation on entry. `both` fill means the element ends visible whatever
   happens, and with no stylesheet at all nothing is hidden in the first
   place — .ms-hidden is only ever added by JS. */
.ms-hidden{visibility:hidden}
.ms-animated{animation-duration:1.05s;animation-fill-mode:both;visibility:visible}

@keyframes msFadeInUp{
  from{opacity:0;transform:translate3d(0,36px,0)}
  to{opacity:1;transform:none}
}
.ms-fadeInUp{animation-name:msFadeInUp}

@media (prefers-reduced-motion:reduce){
  .ms-hidden{visibility:visible}
  .ms-animated{animation:none!important}
}

/* ---------- 20. SERVICE PAGES ---------- */
.ms-svc-hero{position:relative;background:#161a26;
             padding:calc(var(--head-h,164px) + 40px) 32px 64px;
             border-bottom:1px solid rgba(255,255,255,.07)}

/* With a background photo set, the image sits under a scrim heavy enough to
   keep white text legible over any photo. No image, no change. */
.ms-svc-hero.has-bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.ms-svc-hero.has-bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,13,22,.86) 0%,rgba(12,13,22,.72) 55%,rgba(12,13,22,.9) 100%)}
.ms-svc-hero.has-bg > *{position:relative;z-index:1}
.ms-svc-hero-inner{max-width:1240px;margin:0 auto}
.ms-crumb{font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
          color:#8C9197;margin-bottom:18px}
.ms-crumb a{color:var(--accent,#BC3A33)}
.ms-crumb span{padding:0 8px}
.ms-crumb span:last-child{padding:0;color:#8C9197}
.ms-svc-h1{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
           font-size:clamp(34px,5.2vw,66px);line-height:1.0;color:#f4f1ea;margin:0}
.ms-svc-lede{color:#9aa0a9;font-size:clamp(16px,1.7vw,20px);line-height:1.6;max-width:58ch;margin:18px 0 0}
.ms-svc-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.ms-svc-body{background:linear-gradient(rgba(245,242,236,.8),rgba(245,242,236,.8));padding:72px 32px 84px}
.ms-svc-body-inner{max-width:1240px;margin:0 auto;display:grid;
                   grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:52px;align-items:start}
.ms-svc-body-inner.is-wide{grid-template-columns:minmax(0,1fr);max-width:820px}
.ms-svc-thumb{width:100%;height:auto;border:1px solid #ddd6c8;margin-bottom:32px}

.ms-svc-aside{position:sticky;top:110px;background:#161a26;border-radius:4px;padding:28px 26px}
.ms-svc-aside-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
                font-size:19px;color:#f4f1ea;margin:0 0 16px}
.ms-svc-list{list-style:none;margin:0 0 22px;padding:0}
.ms-svc-list li{display:flex;gap:10px;align-items:flex-start;color:#c8ccd3;font-size:14.5px;
                line-height:1.5;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ms-svc-list li:last-child{border-bottom:0}
.ms-svc-list span{color:var(--accent,#BC3A33);flex:0 0 auto}
.ms-svc-aside-call{display:flex;flex-direction:column;gap:3px;padding:15px 18px;border-radius:3px;
                   border:1px solid rgba(255,255,255,.16)}
.ms-svc-aside-call:hover{border-color:var(--accent,#BC3A33)}
.ms-svc-aside-call span{font-family:var(--font-body);font-size:10.5px;letter-spacing:.16em;
                        text-transform:uppercase;color:var(--accent,#BC3A33)}
.ms-svc-aside-call strong{font-family:var(--font-head);font-weight:700;font-size:22px;color:#f4f1ea}

.ms-related{background:#0f1119;padding:76px 32px}
.ms-related-inner{max-width:1240px;margin:0 auto}
.ms-related-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
              font-size:clamp(24px,3vw,36px);color:#f4f1ea;margin:0 0 26px}
.ms-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.ms-related-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 22px 46px;
  background:#161a26;border:1px solid rgba(255,255,255,.08);border-radius:4px;
  transition:border-color .3s ease,transform .3s ease}
.ms-related-card:hover{border-color:var(--accent,#BC3A33);transform:translateY(-3px)}
.ms-related-title{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
                  font-size:18px;color:#f4f1ea}
.ms-related-desc{font-size:14px;line-height:1.55;color:#8C9197}
.ms-related-arrow{position:absolute;left:22px;bottom:20px;color:var(--accent,#BC3A33);font-size:18px}

@media (max-width:980px){
  .ms-svc-body-inner{grid-template-columns:minmax(0,1fr);gap:36px}
  .ms-svc-aside{position:static}
}
@media (max-width:760px){
  .ms-svc-hero{padding:calc(var(--head-h,120px) + 26px) 20px 52px}
  .ms-svc-body{padding:52px 20px 64px}
  .ms-related{padding:56px 20px}
}

/* ---------- 21. ALL-SERVICES PAGE ---------- */
.ms-svc-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.ms-svc-jump a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);font-family:var(--font-body);font-size:12.5px;
  color:#c8ccd3;transition:border-color .25s ease,background .25s ease}
.ms-svc-jump a:hover{border-color:var(--accent,#BC3A33);background:rgba(255,255,255,.05)}
.ms-svc-jump span{font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.1em;
                  color:var(--accent,#BC3A33)}

.ms-svc-intro{background:#f5f2ec;padding:56px 32px 8px}
.ms-svc-intro .ms-prose{max-width:760px;margin:0 auto}

.ms-row{padding:72px 32px;background:#f5f2ec;scroll-margin-top:96px}
.ms-row.is-tint{background:linear-gradient(rgba(245,242,236,.86),rgba(245,242,236,.86)),
                url("../img/paper-texture.webp");background-size:auto,560px}
.ms-row-inner{max-width:1240px;margin:0 auto;display:grid;
              grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.ms-row.is-flip .ms-row-media{order:2}

.ms-row-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;
              border:1px solid #ddd6c8;background:#e8e3d8}
.ms-row-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
            transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.ms-row-media:hover .ms-row-img{transform:scale(1.04)}
.ms-row-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;
  background:repeating-linear-gradient(45deg,#eae5da,#eae5da 14px,#e4dfd3 14px,#e4dfd3 28px)}
.ms-row-ph span{font-family:var(--font-head);font-weight:700;font-size:40px;color:#c4bdaf}
.ms-row-ph em{font-family:var(--font-body);font-style:normal;font-size:11px;letter-spacing:.16em;
              text-transform:uppercase;color:#a89f8e}

.ms-row-num{display:block;font-family:var(--font-head);font-weight:700;font-size:13px;
            letter-spacing:.16em;color:var(--accent,#BC3A33);margin-bottom:10px}
.ms-row-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
          font-size:clamp(26px,3.4vw,42px);line-height:1.02;color:#161a26;margin:0 0 16px}
.ms-row-body{color:#4b5058;font-size:16px;line-height:1.68;margin:0 0 22px;max-width:52ch}
.ms-row-list{list-style:none;margin:0 0 26px;padding:0;
             display:grid;grid-template-columns:1fr 1fr;gap:7px 20px}
.ms-row-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;color:#5b6068}
.ms-row-list li span{color:var(--accent,#BC3A33);flex:0 0 auto}
.ms-row-cta{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
            font-size:14.5px;color:var(--accent,#BC3A33)}
.ms-row-cta:hover{filter:brightness(1.15)}

@media (max-width:980px){
  .ms-row-inner{grid-template-columns:minmax(0,1fr);gap:28px}
  .ms-row.is-flip .ms-row-media{order:0}
  .ms-row-list{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ms-row{padding:52px 20px}
  .ms-svc-intro{padding:44px 20px 4px}
}

/* ---------- 22. ABOUT PAGE ---------- */
.ms-about-story{background:#f5f2ec;padding:76px 32px}
.ms-about-story-inner{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:56px;align-items:start}
.ms-about-year{position:sticky;top:120px}
.ms-about-year-num{display:block;font-family:var(--font-head);font-weight:700;line-height:.86;
  font-size:clamp(76px,11vw,150px);color:var(--accent,#BC3A33);letter-spacing:-.02em}
.ms-about-year-label{display:block;margin-top:12px;font-family:var(--font-body);font-size:12px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7a756c}
.ms-about-prose{max-width:none}

.ms-stats{background:#161a26;padding:44px 32px;border-block:1px solid rgba(255,255,255,.07)}
.ms-stats-inner{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px}
.ms-stat{display:flex;flex-direction:column;gap:6px}
.ms-stat-value{font-family:var(--font-head);font-weight:700;font-size:clamp(38px,5vw,58px);
  line-height:1;color:#f4f1ea}
.ms-stat-label{font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent,#BC3A33)}

.ms-types{background:linear-gradient(rgba(245,242,236,.86),rgba(245,242,236,.86)),
          url("../img/paper-texture.webp");background-size:auto,560px;padding:80px 32px}
.ms-types-inner{max-width:1240px;margin:0 auto}
.ms-types-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  font-size:clamp(28px,3.6vw,46px);line-height:1.02;color:#161a26;margin:0 0 10px}
.ms-types-intro{color:#5b6068;font-size:16px;line-height:1.6;margin:0 0 32px;max-width:48ch}
.ms-types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid #ddd6c8;border-left:1px solid #ddd6c8}
.ms-type{padding:28px 26px 32px;border-right:1px solid #ddd6c8;border-bottom:1px solid #ddd6c8}
.ms-type-num{display:block;font-family:var(--font-head);font-weight:700;font-size:12px;
  letter-spacing:.16em;color:var(--accent,#BC3A33);margin-bottom:14px}
.ms-type-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;font-size:19px;
  color:#161a26;margin:0 0 9px}
.ms-type-desc{font-size:14px;line-height:1.55;color:#5b6068;margin:0}

.ms-crew{position:relative;background:#0f1119}
.ms-crew-img{display:block;width:100%;height:clamp(280px,46vw,560px);object-fit:cover}
.ms-crew-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  height:clamp(240px,32vw,400px);
  background:repeating-linear-gradient(45deg,#1a1e2b,#1a1e2b 16px,#1e222f 16px,#1e222f 32px)}
.ms-crew-ph span{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:22px;color:#6f7684}
.ms-crew-ph em{font-family:var(--font-body);font-style:normal;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#575d68}
.ms-crew-cap{max-width:1240px;margin:0 auto;padding:14px 32px 0;font-family:var(--font-body);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b7079}

.ms-standard{background:#0f1119;padding:80px 32px}
.ms-standard-inner{max-width:820px;margin:0 auto;text-align:center}
.ms-standard-eyebrow{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent,#BC3A33);margin-bottom:14px}
.ms-standard-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,42px);line-height:1.06;color:#f4f1ea;margin:0 0 20px}
.ms-standard-body{color:#9aa0a9;font-size:clamp(16px,1.7vw,19px);line-height:1.7;margin:0}

.ms-area{background:#161a26;padding:64px 32px;border-top:1px solid rgba(255,255,255,.07)}
.ms-area-inner{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.ms-area-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  font-size:clamp(24px,3vw,36px);color:#f4f1ea;margin:0}
.ms-area-body{color:#9aa0a9;font-size:16px;line-height:1.68;margin:0}

@media (max-width:980px){
  .ms-about-story-inner,.ms-area-inner{grid-template-columns:minmax(0,1fr);gap:26px}
  .ms-about-year{position:static}
}
@media (max-width:760px){
  .ms-about-story,.ms-types,.ms-standard{padding-left:20px;padding-right:20px}
  .ms-stats,.ms-area{padding-left:20px;padding-right:20px}
  .ms-crew-cap{padding-left:20px;padding-right:20px}
}

/* ---------- 23. PROJECTS GALLERY PAGE ---------- */
.ms-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.ms-filter{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.18);
  font-family:var(--font-body);font-size:12.5px;color:#c8ccd3;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.ms-filter:hover{border-color:rgba(255,255,255,.4)}
.ms-filter span{font-family:var(--font-head);font-weight:700;font-size:11px;color:#8C9197}
.ms-filter.is-active{background:var(--accent,#BC3A33);border-color:transparent;color:#fff}
.ms-filter.is-active span{color:rgba(255,255,255,.75)}

.ms-projects-page{background:#0f1119;padding:64px 32px 84px}
.ms-projects-empty{max-width:1240px;margin:0 auto;color:#8C9197;font-size:15px}
.ms-masonry{max-width:1400px;margin:0 auto;columns:3;column-gap:16px}
.ms-mtile{break-inside:avoid;margin:0 0 16px;position:relative;overflow:hidden;border-radius:4px;
  border:1px solid rgba(255,255,255,.08);
  transition:opacity .35s ease,transform .35s ease,border-color .3s ease}
.ms-mtile.is-hidden{display:none}
.ms-mtile.is-entering{opacity:0;transform:translateY(10px)}
.ms-mtile:hover{border-color:var(--accent,#BC3A33)}
.ms-mtile .ms-tile{position:static;display:block;cursor:zoom-in}
.ms-mtile-img{display:block;width:100%;height:auto;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.ms-mtile:hover .ms-mtile-img{transform:scale(1.04)}
.ms-mtile-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 48%,rgba(12,13,22,.82));
  opacity:0;transition:opacity .35s ease}
.ms-mtile:hover .ms-mtile-veil{opacity:1}
.ms-mtile-cap{position:absolute;left:18px;right:18px;bottom:16px;pointer-events:none;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease}
.ms-mtile:hover .ms-mtile-cap{opacity:1;transform:none}
.ms-mtile-tag{display:block;font-family:var(--font-body);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.ms-mtile-title{display:block;font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  font-size:17px;color:#fff;margin-top:3px}
.ms-masonry-none{max-width:1240px;margin:0 auto;color:#8C9197;font-size:15px;text-align:center}

@media (max-width:1100px){.ms-masonry{columns:2}}
@media (max-width:620px){
  .ms-masonry{columns:1}
  .ms-projects-page{padding:44px 20px 64px}
  .ms-mtile-cap{opacity:1;transform:none}
  .ms-mtile-veil{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .ms-mtile,.ms-mtile-img,.ms-mtile-cap,.ms-mtile-veil{transition:none!important}
}

/* ---------- 24. CONTACT PAGE ---------- */
.ms-methods{background:#161a26;padding:56px 32px;border-bottom:1px solid rgba(255,255,255,.07)}
.ms-methods-inner{max-width:1240px;margin:0 auto}
.ms-methods-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,30px);color:#f4f1ea;margin:0 0 22px}
.ms-methods-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ms-method{display:flex;flex-direction:column;gap:5px;padding:24px 24px 20px;border-radius:4px;
  background:#1a1e2b;border:1px solid rgba(255,255,255,.09);
  transition:border-color .28s ease,transform .28s ease}
.ms-method:hover{border-color:var(--accent,#BC3A33);transform:translateY(-3px)}
.ms-method-label{font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent,#BC3A33)}
.ms-method-value{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,2.6vw,29px);
  color:#f4f1ea;line-height:1.15;word-break:break-word}
.ms-method-value--sm{font-size:clamp(15px,1.6vw,19px);font-weight:600}
.ms-method-go{margin-top:6px;font-family:var(--font-body);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#8C9197}
.ms-methods-meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:20px;color:#9aa0a9;font-size:14px}
.ms-methods-meta strong{font-family:var(--font-body);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#6b7079;margin-right:7px;font-weight:700}

.ms-contact-main{background:#0f1119;padding:72px 32px 84px}
.ms-contact-main-inner{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:start}
.ms-contact-form-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  font-size:clamp(24px,3vw,36px);color:#f4f1ea;margin:0 0 14px}
.ms-contact-intro{color:#9aa0a9;max-width:none;margin-bottom:22px}
.ms-contact-intro p{color:#9aa0a9}

.ms-next{position:sticky;top:112px;background:#161a26;border:1px solid rgba(255,255,255,.08);
  border-radius:4px;padding:28px 26px}
.ms-next-h{font-family:var(--font-head);font-weight:600;text-transform:uppercase;font-size:19px;
  color:#f4f1ea;margin:0 0 18px}
.ms-next-list{list-style:none;margin:0;padding:0;counter-reset:none}
.ms-next-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ms-next-list li:last-child{border-bottom:0;padding-bottom:0}
.ms-next-num{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.1em;
  color:var(--accent,#BC3A33);flex:0 0 auto;padding-top:2px}
.ms-next-body strong{display:block;font-family:var(--font-head);font-weight:600;
  text-transform:uppercase;font-size:15px;color:#f4f1ea;margin-bottom:4px}
.ms-next-body em{font-style:normal;font-size:13.5px;line-height:1.55;color:#8C9197}

@media (max-width:980px){
  .ms-contact-main-inner{grid-template-columns:minmax(0,1fr);gap:32px}
  .ms-next{position:static;order:-1}
}
@media (max-width:760px){
  .ms-methods{padding:44px 20px}
  .ms-contact-main{padding:52px 20px 64px}
}

/* ---------- 25. HERO HEADLINE — LETTER BY LETTER ----------
   Same rule as the headings: letters are visible by default. The stagger is an
   animation with `both` fill triggered by .is-typed, so it ends visible and a
   missing or stale script leaves a perfectly normal headline. */
.ms-split{display:inline}
.ms-word{display:inline-block;white-space:nowrap}
.ms-ch{display:inline-block}
@keyframes msChIn{
  from{opacity:0;transform:translateY(.42em) rotate(2deg)}
  to{opacity:1;transform:none}
}
.ms-slide-title.is-typed .ms-ch{
  animation:msChIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.ms-slide.is-active .ms-slide-title.is-typed{animation:none}

@media (prefers-reduced-motion:reduce){
  .ms-ch{animation:none!important;opacity:1!important;transform:none!important}
}

/* Footer badges sit directly under the mark, so they need their own spacing. */
.ms-badges{margin:16px 0 20px}
.ms-badges-row img{max-height:64px}