* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }

:root {
  --gutter: #d9d5cb;
  --bg: #ffffff;
  --bg-raised: #f4f4f0;
  --card-bg: #ffffff;
  --fg: #101111;
  --fg-muted: #56534c;
  --line: #101111;
  --dark-band-bg: #101111;
  --dark-band-fg: #f6f5f0;
  --services-accent: #3e5aa8;
  --home-accent: #f05123;
  --work-accent: #bed62f;
  --work-banner-bg: #222b09;
  --freebie-accent: #d9a1c9;
  --about-accent: #fcd404;
  --glow-opacity: 0.16;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gutter: #000000;
    --bg: #101111;
    --bg-raised: #1a1b1c;
    --card-bg: #1a1b1c;
    --fg: #f6f5f0;
    --fg-muted: #a7a49c;
    --line: #f6f5f0;
    --dark-band-bg: #000000;
    --dark-band-fg: #f6f5f0;
    --services-accent: #6099d2;
    --glow-opacity: 0.5;
  }
}
:root[data-theme="dark"] {
  --gutter: #000000;
  --bg: #101111;
  --bg-raised: #1a1b1c;
  --card-bg: #1a1b1c;
  --fg: #f6f5f0;
  --fg-muted: #a7a49c;
  --line: #f6f5f0;
  --dark-band-bg: #000000;
  --dark-band-fg: #f6f5f0;
  --services-accent: #6099d2;
  --glow-opacity: 0.5;
}

body {
  margin: 0;
  background: var(--gutter);
  font-family: 'Roboto', Arial, sans-serif;
  color: var(--fg);
  overflow-x: hidden;
  width: 100%;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.72; }
:focus-visible { outline: 3px solid var(--home-accent); outline-offset: 2px; }

.h1 {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.18;
  text-wrap: balance;
}
.label {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.grad-text {
  background-image: linear-gradient(120deg, #ff8a4c, #ed1c24 20%, #b57ecb 38%, #4d78c9 55%, #bed62f 72%, #ff8a4c 100%);
  background-size: 300% 300%;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(180,130,255,0.35));
}
/* Warm-only cycle: no blue/purple stops, so it stays legible on the blue Services background in both themes */
.grad-text--warm {
  background-image: linear-gradient(120deg, #ff8a4c, #ed1c24 30%, #fcd404 58%, #bed62f 82%, #ff8a4c 100%);
  filter: drop-shadow(0 0 18px rgba(255,138,76,0.4));
}
/* No green/lime stops, so it stays legible on the dark green Work banner */
.grad-text--work {
  background-image: linear-gradient(120deg, #ff8a4c, #ed1c24 28%, #ff5ea8 54%, #b57ecb 80%, #ff8a4c 100%);
  filter: drop-shadow(0 0 18px rgba(255,94,168,0.4));
}

/* ---- home stat bars ---- */
.stat-bar { position: relative; overflow: hidden; background: rgba(127,127,127,0.25); }
.stat-bar--h { height: 56px; margin-top: 22px; width: 100%; }
.stat-bar--v { width: 96px; height: 100%; margin-top: 0; }
.stat-bar-fill { position: absolute; background: var(--home-accent); transition: width 3.2s cubic-bezier(.2,.8,.2,1), height 3.2s cubic-bezier(.2,.8,.2,1); }
.stat-bar--h .stat-bar-fill { left: 0; top: 0; bottom: 0; width: 0%; }
.stat-bar--v .stat-bar-fill { left: 0; right: 0; bottom: 0; height: 0%; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); gap: 8px; width: 140px; height: 100%; flex-shrink: 0; perspective: 400px; }
.stat-tiles-lshape { display: flex; align-items: flex-end; gap: 8px; }
.stat-tiles.stat-tiles--base { grid-template-columns: repeat(6, 34px); grid-template-rows: repeat(2, 30px); width: auto; height: auto; }
.stat-tiles.stat-tiles--tower { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(6, 30px); width: auto; height: auto; }
.stat-tiles-mobile-l { display: none; position: absolute; right: 0; bottom: 0; flex-direction: column; align-items: flex-end; gap: 6px; }
.stat-tiles.stat-tiles--mtop { grid-template-columns: repeat(6, 28px); grid-template-rows: repeat(2, 24px); gap: 6px; width: auto; height: auto; }
.stat-tiles.stat-tiles--mbottom { grid-template-columns: repeat(3, 28px); grid-template-rows: 24px; gap: 6px; width: auto; height: auto; }
.stat-tile { background: rgba(127,127,127,0.25); border-radius: 3px; transform: rotateY(90deg); opacity: 0; transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.25s linear, background 0.45s; }
.stat-tile.is-flipped { background: var(--home-accent); transform: rotateY(0deg); opacity: 1; }

/* ---- real form fields ---- */
.field-input {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 15px;
  padding: 16px 18px;
  border: 3px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field-input::placeholder { color: var(--fg-muted); opacity: 1; }
.field-input:focus { outline: none; border-color: var(--freebie-accent); box-shadow: 0 0 0 3px rgba(217,161,201,0.35); }

/* ---- clickable sub-page cards ---- */
.card-link { cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease; text-decoration: none; color: inherit; }
.card-link:hover { transform: translateY(-6px); border-color: var(--services-accent); box-shadow: 0 14px 24px -12px rgba(0,0,0,0.4); opacity: 1; }

/* ---- gallery / project sub-page placeholders ---- */
.ph-tile {
  border: 3px dashed var(--fg-muted);
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--fg-muted);
}
.ph-tile svg { opacity: 0.7; }
.btn {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 4px solid var(--line);
  transform: skewX(-8deg);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .2s ease;
  will-change: transform;
}
.btn > span { display: inline-block; transform: skewX(8deg); }
.btn-primary { background: var(--home-accent); color: #ffffff; border-color: var(--home-accent); }
.btn:hover { transform: skewX(-8deg) translateY(-5px); box-shadow: 0 14px 24px -8px rgba(0,0,0,0.45); filter: brightness(1.06); }
.btn:active { transform: skewX(-8deg) translateY(-1px); }

.text-link { transition: color .2s ease, border-color .2s ease, opacity .2s ease, letter-spacing .2s ease; cursor: pointer; }
.text-link:hover { color: var(--home-accent) !important; border-color: var(--home-accent) !important; opacity: 1 !important; letter-spacing: 0.16em; }

/* ---- scroll motion system ---- */
.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal { opacity: 0; transform: translateY(36px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js .reveal-tilt { transform: translateY(36px) rotateX(14deg); transform-origin: 50% 100%; }
.js .reveal-tilt.is-visible { transform: translateY(0) rotateX(0deg); }
.stat-num { display: inline-block; font-variant-numeric: tabular-nums; }
/* "+2 Million" is far wider than the "2M+" this replaced. Below 861px this
   stat block is already stacked full-width by the responsive grid rules, so
   the existing 96px->52px->40px breakpoint shrinks give it plenty of room.
   Above that, it sits in a narrow 1-of-3 grid column -- scale it fluidly with
   the viewport (instead of a flat shrink) so it stays as large as the other
   two stats once the column is wide enough, and only backs off near the
   860px edge where the column is tightest, always staying on one line. */
@media (min-width: 861px) {
  .stat-num[data-suffix=" Million"] { font-size: clamp(48px, 8.9vw - 28.7px, 96px) !important; white-space: nowrap; }
}
.parallax { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-tilt { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .btn:hover, .btn:active { transition: none !important; transform: skewX(-8deg) !important; filter:none !important; }
  .parallax { transform: none !important; }
  .grad-text { background-position: 40% 50% !important; }
}

.brand-mark {
  background-image: url("/assets/img/img-14-1b7e949135.png");
  background-size: cover;
  background-position: center;
  display: inline-block;
  flex-shrink: 0;
}

/* ---- persistent site nav ---- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  background: var(--bg);
  border-bottom: 4px solid var(--line);
  gap: 24px;
  flex-wrap: wrap;
}
.nav-links { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.nav-link {
  font-family: 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 4px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.nav-link:hover { border-color: var(--nav-accent, var(--home-accent)); opacity: 1; }
.nav-link.active { border-color: var(--nav-accent, var(--home-accent)); }
.theme-toggle-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line);
  background: transparent; color: var(--fg); font-size: 16px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .3s ease;
}
.theme-toggle-btn:hover { background: var(--line); color: var(--bg); transform: rotate(25deg); }

/* ---- uniform framed viewport ---- */
.page-frame {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 6px;
  background: linear-gradient(180deg, #ff8a4c, #ed1c24 26%, #b57ecb 52%, #4d78c9 74%, #bed62f 100%);
}
.page-frame::before {
  content: "";
  position: absolute;
  inset: 0 -70px;
  background: linear-gradient(180deg, #ff8a4c, #ed1c24 26%, #b57ecb 52%, #4d78c9 74%, #bed62f 100%);
  filter: blur(70px);
  opacity: var(--glow-opacity);
  z-index: -1;
}
.page-viewport {
  position: relative;
  height: calc(100vh - 86px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  perspective: 1800px;
}
.site-page { display: block; }
.site-page[hidden] { display: none !important; }

@media print {
  .site-nav { display: none; }
  .page-frame { padding: 0; background: none; max-width: none; margin: 0; }
  .page-frame::before { display: none; }
  .page-viewport { height: auto; overflow: visible; }
  body { background: #ffffff; }
}

/* ================================================================
   RESPONSIVE / MULTI-DEVICE OPTIMIZATION
   Three tiers: large tablet & small desktop (<=1100px), tablet/
   large phone (<=860px, nav collapses to a hamburger menu), and
   phone (<=520px, tightest spacing + smallest type).
   ================================================================ */

.nav-toggle-btn {
  display: none;
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line);
  background: transparent; color: var(--fg); cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.nav-toggle-btn:hover { background: var(--line); color: var(--bg); }

@media (max-width: 1100px) {
  section[style*="padding:64px"],
  section[style*="padding: 64px"],
  section[style*="padding:100px 64px"],
  section[style*="padding:96px 64px"],
  section[style*="padding:88px 64px"],
  section[style*="padding:80px 64px"],
  section[style*="padding:56px 64px"],
  section[style*="padding:40px 64px"],
  section[style*="padding:32px 64px"],
  section[style*="padding:0 64px"],
  footer[style*="64px"] { padding-left: 44px !important; padding-right: 44px !important; }

  [style*="font-size:130px"] { font-size: 96px !important; }
}

@media (max-width: 860px) {
  .site-nav { padding: 14px 20px; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--bg); border-bottom: 4px solid var(--line);
    padding: 12px 24px 24px;
  }
  .nav-links.is-open { display: flex; }
  .nav-link { width: 100%; padding: 10px 0; }
  .nav-toggle-btn { display: flex; }
  .site-nav .btn-primary { padding: 12px 18px !important; font-size: 12px !important; }

  section[style*="padding:64px"],
  section[style*="padding: 64px"],
  section[style*="padding:100px 64px"],
  section[style*="padding:96px 64px"],
  section[style*="padding:88px 64px"],
  section[style*="padding:80px 64px"],
  section[style*="padding:56px 64px"],
  section[style*="padding:40px 64px"],
  section[style*="padding:32px 64px"],
  section[style*="padding:0 64px"],
  footer[style*="64px"] { padding-left: 24px !important; padding-right: 24px !important; }

  [style*="grid-template-columns:repeat(4, minmax"],
  [style*="grid-template-columns:repeat(3, minmax"],
  [style*="grid-template-columns:repeat(2, minmax"],
  [style*="grid-template-columns: 340px 1fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  [style*="font-size:130px"] { font-size: 64px !important; }
  [style*="font-size:96px"] { font-size: 52px !important; }
  [style*="font-size:76px"] { font-size: 44px !important; }
  [style*="font-size:56px"] { font-size: 34px !important; }
  [style*="font-size:52px"] { font-size: 32px !important; }
  [style*="font-size:48px"] { font-size: 30px !important; }
  [style*="font-size:44px"] { font-size: 28px !important; }
  [style*="font-size:32px"] { font-size: 24px !important; }
  [style*="font-size:22px"] { font-size: 19px !important; }
  [style*="font-size:20px"] { font-size: 17px !important; }
  [style*="font-size:19px"] { font-size: 16px !important; }

  .stat-tiles-lshape { transform: scale(0.85); transform-origin: top left; }
  .page-frame::before { inset: 0 -24px; }

  /* Decorative skull art on the "Ready to Stop Blending In?" band: full-opacity
     absolute art works flanking the heading on wide screens, but on narrower
     screens the two images no longer have room to sit beside the text and
     start covering it instead — fade them back to a background texture and
     shrink them so the heading and CTA button stay fully legible and tappable.
     A class is used here (not an attribute selector on the inline style) because
     the parallax scroll script rewrites these elements' style.transform every
     frame, which makes the browser re-serialize the whole style attribute and
     breaks any [style*="..."] match against it. */
  .cta-skull-art { opacity: 0.3 !important; max-width: 55vw !important; top: auto !important; }
  .cta-skull-art-l { left: -3vw !important; bottom: 82px !important; }
  .cta-skull-art-r { right: -3vw !important; bottom: 69px !important; }

  [style*="align-items:center; gap:24px; padding:30px 0; border-bottom:2px solid var(--line)"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  [style*="align-items:center; gap:24px; padding:30px 0; border-bottom:2px solid var(--line)"] a[style*="width:200px"] {
    width: auto !important;
    text-align: left !important;
  }
}

@media (max-width: 520px) {
  section[style*="64px"],
  footer[style*="64px"] { padding-left: 18px !important; padding-right: 18px !important; }

  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }

  [style*="font-size:130px"] { font-size: 46px !important; }
  [style*="font-size:96px"] { font-size: 40px !important; }
  [style*="font-size:76px"] { font-size: 36px !important; }
  [style*="font-size:56px"] { font-size: 28px !important; }
  [style*="font-size:52px"] { font-size: 26px !important; }
  [style*="font-size:48px"] { font-size: 25px !important; }
  [style*="font-size:44px"] { font-size: 24px !important; }
  [style*="font-size:32px"] { font-size: 20px !important; }
  [style*="font-size:22px"] { font-size: 18px !important; }
  [style*="font-size:20px"] { font-size: 16px !important; }
  [style*="font-size:19px"] { font-size: 15px !important; }

  .parallax { max-width: 60vw !important; }
  .stat-tiles-lshape { display: none; }
  /* On mobile the tile graphic is absolutely positioned relative to a card
     whose min-height collapses to fit the (shorter) heading text, so pinning
     it to bottom:0 made it ride up and overlap "DOZENS" / "OF PROJECTS
     COMPLETED". Let it flow normally below the text instead. */
  .stat-tiles-mobile-l { display: flex; position: static; margin-top: 20px; }
  [style*="min-height:224px"] { min-height: 0 !important; }
  .page-frame { padding: 0 3px; }
  .page-frame::before { inset: 0 -10px; }
}


/* ---- accessibility: skip link ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--home-accent);
  color: #ffffff;
  padding: 14px 20px;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---- cookie consent banner ---- */
#cookie-consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  max-width: 680px;
  margin: 0 auto;
  background: var(--dark-band-bg);
  color: var(--dark-band-fg);
  border: 3px solid var(--home-accent);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
#cookie-consent-banner p {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dark-band-fg);
  flex: 1 1 320px;
}
#cookie-consent-banner a { text-decoration: underline; }
#cookie-consent-banner .consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
#cookie-consent-banner .btn {
  padding: 12px 20px;
  font-size: 12px;
  background: transparent;
  color: var(--dark-band-fg);
  border-color: var(--dark-band-fg);
}
#cookie-consent-banner .btn-primary {
  background: var(--home-accent);
  color: #ffffff;
  border-color: var(--home-accent);
}

/* ---- legal page content (Privacy / Terms / Cookies) ---- */
.legal-content {
  max-width: 780px;
  padding: 88px 64px 96px;
  margin: 0 auto;
}
.legal-content h1 {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 52px;
  margin: 0 0 8px;
  line-height: 0.95;
}
.legal-content .legal-updated {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 48px;
}
.legal-content h2 {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 24px;
  margin: 44px 0 14px;
  line-height: 1.1;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p, .legal-content li {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-muted);
  margin: 0 0 16px;
  max-width: 68ch;
}
.legal-content ul, .legal-content ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal-content strong { color: var(--fg); }
.legal-content a { color: var(--home-accent); text-decoration: underline; }
.legal-placeholder {
  background: var(--bg-raised);
  border: 2px dashed var(--fg-muted);
  padding: 2px 6px;
  font-style: italic;
}

/* ---- mobile "Dozens of Projects Completed" tile layout ----
   The 6x2 tile grid sits inline beside "DOZENS" (right after the S), and the
   row-of-3 sits inline beside "OF PROJECTS COMPLETED" (right after the D),
   matching the client-provided reference layout. Pixel offsets were measured
   against a simulated 390px-wide mobile viewport with the real mobile font
   sizes forced -- close on common phone widths, but worth a quick eyeball
   check on an actual device since no two phones are pixel-identical. */
@media (max-width: 520px) {
  .stat-tiles-mobile-l { position: static !important; margin-top: 0 !important; }
  .stat-tiles--mtop {
    position: absolute !important;
    left: 140px !important;
    top: -3px !important;
  }
  .stat-tiles--mbottom {
    position: absolute !important;
    left: 242px !important;
    top: 57px !important;
  }
  .stat-dozens-label { margin-top: 15px !important; }
}

/* Home first screen (desktop): hero + stats band fit together above the fold.
   Sizes scale with viewport height; script.js fine-tunes the fit (fitHomeFold). */
#page-home > section:first-of-type .h1 { line-height: 1.02; }
@media (min-width: 861px) {
  #page-home > section:first-of-type { display: flex; flex-direction: column; justify-content: center; padding-top: clamp(28px, 5vh, 100px) !important; padding-bottom: clamp(24px, 4vh, 90px) !important; }
  #page-home > section:first-of-type [class~="label"] { margin-bottom: clamp(8px, 1.6vh, 20px) !important; }
  #page-home > section:first-of-type .h1 { font-size: min(130px, 11.5vh) !important; margin-bottom: clamp(12px, 2.4vh, 28px) !important; }
  #page-home > section:first-of-type p { font-size: clamp(16px, 2.3vh, 22px) !important; margin-bottom: clamp(18px, 3.2vh, 40px) !important; }
  #page-home > section:first-of-type .btn { padding-top: clamp(13px, 2vh, 20px) !important; padding-bottom: clamp(13px, 2vh, 20px) !important; }
  #page-home > section:nth-of-type(2) { padding-top: clamp(28px, 4.5vh, 64px) !important; padding-bottom: clamp(28px, 4.5vh, 64px) !important; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  #page-home > section:first-of-type .h1 { font-size: min(96px, 11.5vh) !important; }
}
.stat-tile { transition: transform 0.7s cubic-bezier(.2,.8,.2,1), opacity 0.4s linear, background 0.7s; }