/* Xtreme local clone v0.0.3. Original presentation is retained in each page. */
:root {
  --brand-red: #b82636;
  --paper: #ffffff;
  --ink: #000000;
  --footer-ink: #171717;
  --soft-ink: #595959;
  --soft-paper: #f5f5f5;
  --line: #c7c7c7;
  --shade: #00000066;
  --credit-label: rgba(255,255,255,.55);
  --credit-rule: rgba(255,255,255,.07);
  --local-focus: var(--brand-red);
  --font-display: wfont_436ba3_6b48d30513664ef9b383559174b888b1, sans-serif;
  --font-body: wfont_436ba3_5449c948c26746ca806f59f2982c884e, sans-serif;
  --local-ads-height: 0px !important;
  --local-ads-top-height: 0px !important;
  --sticky-offset: 0px !important;
}
html, body { min-height: 100%; height: auto; overflow-x: clip; }
[data-motion-enter="done"] { animation: none !important; }
local-video > .bgVideoposter { opacity: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--local-focus); outline-offset: 4px; }
video { display: block; }
.responsive-site { display: none; }
.happyllama-credit { background: var(--footer-ink); border-top: 1px solid var(--credit-rule); }
.happyllama-credit-inner { max-width: 1168px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: flex-end; align-items: center; }
/* Exact credit treatment and wordmark reused from the existing Xtreme and Flat Four sites. */
.powered-by { display: inline-flex; align-items: center; gap: .6rem; opacity: .65; transition: opacity .2s ease; text-decoration: none; white-space: nowrap; }
.powered-by:hover, .powered-by:focus-visible { opacity: 1; }
.powered-by span { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--credit-label); font-weight: 600; }
.powered-by img { height: 15px; width: auto; display: block; position: relative; top: 1px; }
.action-button {
  display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px;
  background: var(--brand-red); color: var(--paper); border: 1px solid var(--brand-red);
  border-radius: 4px; font: 16px/1.4 var(--font-body); text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background .2s, color .2s;
}
.action-button:hover { background: var(--paper); color: var(--brand-red); }
.action-button:active { transform: translateY(1px); }
.action-button:disabled { opacity: .5; cursor: wait; }
.contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font: 16px/1.5 var(--font-body); color: var(--ink); }
.contact-form label { margin-top: 8px; }
.contact-form input, .contact-form textarea {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 12px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0;
  font: 16px/1.5 var(--font-body);
}
.contact-form input { height: 44px; }
.contact-form textarea { min-height: 104px; resize: vertical; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 12px; }
.form-note { color: var(--soft-ink); font-size: 13px; }
.form-status { padding: 14px; border: 1px solid var(--line); background: var(--soft-paper); }
.form-status a { color: var(--brand-red); text-decoration: underline; }
#comp-lx2n2c2f { height: auto !important; min-height: 506px; }
.project-gallery { position: relative; width: 100%; font: 16px/1.5 var(--font-body); }
.gallery-track { display: flex; gap: 10px; align-items: center; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-photo { display: block; flex: 0 0 auto; padding: 0; border: 0; background: var(--soft-paper); height: 464px; scroll-snap-align: start; cursor: zoom-in; }
.gallery-photo img { display: block; height: 100%; width: auto; max-width: none; object-fit: contain; }
.gallery-photo:focus-visible { outline-offset: -5px; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 20px; }
.gallery-controls button, .lightbox button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: 44px; height: 44px; font: 24px/1 var(--font-body); cursor: pointer; }
.gallery-controls button:hover { border-color: var(--brand-red); color: var(--brand-red); }
.gallery-controls button:disabled { opacity: .35; cursor: default; }
.lightbox { position: fixed; inset: 0; box-sizing: border-box; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; margin: 0; padding: 60px; border: 0; background: var(--footer-ink); color: var(--paper); }
.lightbox::backdrop { background: var(--footer-ink); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
.lightbox img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox .lightbox-close { position: absolute; right: 16px; top: 16px; }
.lightbox-controls { display: flex; align-items: center; justify-content: center; gap: 28px; font: 16px/1.5 var(--font-body); }
[data-local-page="portfolio"] [data-mesh-id="comp-lx2bzmphinlineContent-gridContainer"] { grid-template-rows: auto auto auto !important; min-height: 0 !important; }
[data-local-page="portfolio"] #comp-lx2m09of { grid-area: 1 / 1 / 2 / 2 !important; margin: 0 !important; }
[data-local-page="portfolio"] #comp-lx2m09oj { grid-area: 2 / 1 / 3 / 2 !important; margin: 90px auto 50px !important; left: 0 !important; justify-self: center !important; }
[data-local-page="portfolio"] #comp-lx2mpfh6 { grid-area: 3 / 1 / 4 / 2 !important; margin: 0 0 60px !important; height: auto !important; }
@media (max-width: 1199px) {
  #SITE_CONTAINER { display: none; }
  .responsive-site { display: block; width: 100%; min-width: 0; color: var(--ink); background: var(--paper); font: 16px/1.7 var(--font-body); }
  .responsive-site *, .responsive-site *::before, .responsive-site *::after { box-sizing: border-box; }
  .responsive-site h1, .responsive-site h2 { font-family: var(--font-display); font-style: normal; font-weight: 400; line-height: 1.12; overflow-wrap: anywhere; min-width: 0; }
  .responsive-site h1 { font-size: clamp(34px, 6vw, 50px); }
  .responsive-site h2 { font-size: clamp(28px, 4.5vw, 42px); margin: 0 0 20px; }
  .responsive-site p { margin: 0 0 22px; }
  .responsive-header { position: sticky; top: 0; z-index: 20; height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; background: var(--footer-ink); }
  .responsive-header img { display: block; width: 125px; height: 52px; object-fit: contain; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 10px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
  .menu-toggle span { display: block; height: 2px; width: 100%; background: var(--paper); }
  .responsive-nav { position: fixed; inset: 82px 0 auto; z-index: 19; padding: 16px 24px 24px; background: var(--footer-ink); max-height: calc(100dvh - 82px); overflow-y: auto; }
  .responsive-nav[hidden] { display: none; }
  .responsive-nav a { display: block; padding: 10px 12px; color: var(--paper); text-decoration: none; white-space: nowrap; font-size: 16px; }
  .responsive-nav a[aria-current="page"] { background: var(--brand-red); border-radius: 4px; }
  .responsive-hero { position: relative; overflow: clip; display: grid; place-items: center; min-height: 230px; padding: 50px 24px 70px; border-radius: 0 0 50% 4% / 0 0 8% 4%; isolation: isolate; }
  .responsive-hero.home-hero { min-height: 460px; }
  .responsive-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
  .hero-shade { position: absolute; inset: 0; background: var(--shade); z-index: -1; }
  .hero-copy { max-width: 690px; text-align: center; color: var(--paper); }
  .hero-copy h1 { margin: 0 0 28px; }
  .hero-copy .action-button { border-radius: 40px; }
  .responsive-intro, .responsive-statement, .responsive-contact { padding: 60px 24px; max-width: 1000px; margin: 0 auto; }
  .responsive-intro { display: grid; gap: 38px; }
  .image-collage { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 145px); }
  .image-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .image-collage img:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
  .feature-line { font-family: var(--font-display); font-size: 24px; line-height: 1.25; }
  .responsive-service { padding: 36px 24px; display: grid; gap: 30px; align-items: center; max-width: 1000px; margin: 0 auto; }
  .responsive-service img { display: block; width: 100%; height: 300px; object-fit: cover; }
  .responsive-service p { font-size: 16px; line-height: 1.7; }
  .responsive-statement { text-align: center; }
  .responsive-statement p { max-width: 760px; margin: 0 auto; }
  .responsive-cta { padding: 60px 24px; background: var(--brand-red); color: var(--paper); text-align: center; }
  .responsive-cta p { max-width: 650px; margin: 0 auto 24px; }
  .responsive-cta .action-button { background: var(--paper); color: var(--brand-red); }
  .responsive-footer { padding: 44px 24px; display: grid; gap: 30px; background: var(--footer-ink); color: var(--paper); }
  .responsive-footer h2 { font-size: 24px; margin: 0 0 12px; }
  .responsive-footer p { margin: 0; font-size: 14px; }
  .responsive-footer a { color: var(--paper); text-decoration: none; white-space: nowrap; }
  .responsive-footer img { display: block; max-width: 226px; object-fit: contain; }
  .responsive-contact > h2 { margin: 0 0 30px; }
  .responsive-contact .contact-form { margin: 0 0 50px; }
  .responsive-contact .contact-details * { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; font: 16px/1.8 var(--font-body) !important; text-align: left !important; }
  .responsive-contact .contact-details h2 { margin-bottom: 18px !important; }
  .responsive-contact .contact-details a { color: var(--brand-red); }
  .responsive-site .gallery-photo { height: clamp(260px, 48vw, 430px); }
  .responsive-site .project-gallery { margin-bottom: 40px; }
  .lightbox { padding: 60px 12px 24px; }
}
@media (min-width: 680px) and (max-width: 1199px) {
  .responsive-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .image-collage { grid-template-rows: repeat(2, 180px); }
  .responsive-service { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .responsive-service:nth-of-type(even) > img { grid-column: 2; grid-row: 1; }
  .responsive-service:nth-of-type(even) > div { grid-column: 1; grid-row: 1; }
  .responsive-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }