:root {
  --navy: #2f3c50;
  --navy2: #39485f;
  --mustard: #D4A017;
  --mustard-on-light: #8a6400;
  --orange: #C3733A;
  --bg: var(--navy);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --border: rgba(255,255,255,0.14);
  --shadow: 0 14px 40px rgba(0,0,0,0.35);
  --maxw: 1200px;
  --radius2: 24px;
  --gap2: 28px;
  --pad: 24px;
  --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-head: "Bebas Neue", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --navOffset: 92px;
}

* { box-sizing: border-box; }
html, body { padding: 0; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font-family: inherit; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 78px 0; background: var(--navy); }
.section.tight { padding: 56px 0; }
.section.light { background: #fff; color: var(--navy); }
.section.light .muted { color: rgba(47,60,80,0.72); }
.section.light .kicker { color: rgba(47,60,80,0.60) !important; }
.section.light .h2, .section.light .h3 { color: var(--navy); }
.section.light a { color: var(--navy); }

.muted { color: var(--muted); }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(47,60,80,0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px;
}
.brand img { height: 30px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a {
  font-size: 14px; letter-spacing: 0.03em; color: rgba(255,255,255,0.82);
  padding: 10px 10px; border-radius: 10px;
}
.nav-links a:hover { background: rgba(255,255,255,0.08); color: #fff; }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  /* Match navigation font for CTA buttons */
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cta.primary {
  background: var(--mustard);
  border-color: var(--mustard);
  color: #101418;
}
.cta.primary:hover { filter: brightness(1.03); }
.cta.ghost {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.84);
  padding: 12px 10px;
}
.cta.ghost:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero {
  position: relative;
  min-height: 82vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-media { position: absolute; inset: 0; background: #0b0f14; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Ensure the hero background video covers the container just like the image */
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%; /* favor top framing so heads aren’t cut off */
  display: block;
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(47,60,80,0.55),
    rgba(47,60,80,0.65)
  );
}
.hero-inner { position: relative; padding: 0 0 66px; }

.kicker {
  color: rgba(255,255,255,0.74);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.h1 {
  font-family: var(--font-head);
  font-size: clamp(44px, 6vw, 82px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 10px 0 14px;
}
.lede {
  max-width: 760px;
  color: rgba(255,255,255,0.86);
  font-size: 18px;
  line-height: 1.48;
  margin: 0 0 24px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.grid { display: grid; gap: var(--gap2); }
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-conversion-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.work-conversion-strip .p { margin: 0; max-width: 760px; }
.work-conversion-strip .cta { flex: 0 0 auto; }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.thumb { aspect-ratio: 16 / 10; overflow: hidden; background: #0b0f14; }
.thumb picture { display: block; width: 100%; height: 100%; }
.thumb img { width:100%; height:100%; object-fit:cover; transition: transform 320ms ease, filter 320ms ease; }
.card:hover .thumb img { transform: scale(1.02); filter: brightness(0.90); }
.card-body { padding: 18px 18px 20px; }
.card-title { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.card-sub { font-size: 14px; color: var(--muted); margin: 0; }

/* Horizontal carousel for featured work on the home page */
.carousel {
  display: flex;
  gap: var(--gap2);
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.carousel .card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 300px;
}

/* Grid layout for featured work cards on home page */
.featured-grid {
  display: grid;
  gap: var(--gap2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.h2 {
  font-family: var(--font-head);
  font-size: 46px;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  line-height: 0.95;
  color: #fff;
}
.h3 {
  font-family: var(--font-head);
  font-size: 34px;
  margin: 0 0 12px;
  line-height: 0.95;
  color: #fff;
}
.title-accent { display:inline-block; color: var(--mustard); }
.section.light .title-accent,
.panel-light .title-accent {
  color: var(--mustard-on-light);
}
.p { font-size: 16px; line-height: 1.7; max-width: 860px; margin: 0 0 14px; }

.list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}
.list li { padding-left: 26px; position: relative; }
.list li::before{
  content: "🎬";
  position: absolute;
  left: 0;
  top: 0.18em;
  line-height: 1;
}
.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.step {
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 18px;
  background: rgba(255,255,255,0.05);
}
.step h3,
.step h4 {
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}
.step p { margin:0; font-size:14px; line-height:1.6; color: rgba(255,255,255,0.72); }

.split { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items:center; }
.portrait {
  border-radius: var(--radius2);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0b0f14;
}
.portrait img { aspect-ratio: 16/12; object-fit:cover; width:100%; height:100%; }

.callout {
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  padding: 22px;
  background: rgba(255,255,255,0.06);
}
.panel-light {
  background: rgba(255,255,255,0.92);
  color: #101418;
  border-color: rgba(47,60,80,0.14);
}
.panel-light .muted { color: rgba(16,20,24,0.72); }

.footer { padding: 54px 0; background: var(--navy); }
.footer-grid { display:grid; grid-template-columns: minmax(0, 0.78fr) minmax(260px, 1fr) auto; gap:32px; align-items:flex-start; }
.footer img { height: 84px; width:auto; }
.footer a { color: rgba(255,255,255,0.78); font-size:14px; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer .links { display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.footer .small { line-height: 1.6; }
.footer-business { display:grid; gap:6px; margin-top: 4px; }
.footer-business__name strong { color: rgba(255,255,255,0.92); }
.footer-business__links { display:flex; flex-wrap:wrap; gap:8px 16px; }

.small { font-size: 13px; color: rgba(255,255,255,0.72); margin-top:12px; }

.form { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:18px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label {
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.78);
}
.section.light .field label { color: rgba(16,20,24,0.72); }
.field input, .field textarea {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 15px;
  outline: none;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
}
.section.light .field input, .section.light .field textarea {
  background:#fff;
  color:#101418;
  border-color: rgba(47,60,80,0.14);
}
.form-privacy{
  grid-column:1 / -1;
  margin:0;
  color:rgba(16,20,24,0.68);
  font-size:13px;
  line-height:1.55;
}
.section.light .form-privacy a,
.form-privacy a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.field textarea { min-height: 120px; grid-column: 1 / -1; resize: vertical; }
.form .full { grid-column: 1 / -1; }

section[id] { scroll-margin-top: var(--navOffset); }

@media (max-width: 980px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-conversion-strip { align-items: flex-start; flex-direction: column; }
  .process { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .nav-links { display:none; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer .links { justify-content:flex-start; }
}
@media (max-width: 520px) {
  .section { padding: 58px 0; }
  .hero-inner { padding-bottom: 46px; }
  .lede { font-size: 16px; }
  .list { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .hero-media video { object-position: 50% 25%; }
}

/* Nav uses brand headline font */
.nav-links a{
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Ensure brand colors are exact */
:root{
  --navy: #2f3c50;
  --mustard: #D4A017;
}

/* Hero subtle slow push-in (disabled for reduced motion) */
.hero-media img{
  transform-origin: center;
  animation: heroPush 18s ease-in-out infinite alternate;
}
@keyframes heroPush{
  from{ transform: scale(1); }
  to{ transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation: none !important; }
}

/* Section image overlay utility */
.image-overlay{
  position: relative;
}
.image-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(47,60,80,0.35); /* navy overlay */
  pointer-events:none;
}
.image-overlay img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Large ghosted 55 mark in background */
.ghost-55{
  position: relative;
  overflow: hidden;
}
.ghost-55::before{
  content:"";
  position:absolute;
  right: -10%;
  top: 10%;
  width: 620px;
  height: 620px;
  background: url('/assets/immutable/a9182f27898c3fc2/55mark.svg') no-repeat center/contain;
  opacity: 0.18;
  transform: rotate(-6deg);
  pointer-events:none;
  filter: saturate(1.1);
}
@media (max-width: 980px){
  .ghost-55::before{
    width: 420px;
    height: 420px;
    right: -25%;
    top: 6%;
    opacity: 0.06;
  }
}

/* ===== Search-focused hero hierarchy + services navigation ===== */
.hero-eyebrow{
  margin: 0 0 8px;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nav-services{
  position: relative;
}

.services-toggle{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: normal;
  text-transform: uppercase;
}

.services-toggle:hover,
.services-toggle:focus-visible,
.services-toggle.active,
.services-toggle[aria-expanded="true"]{
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.services-caret{
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

[aria-expanded="true"] > .services-caret{
  transform: translateY(2px) rotate(225deg);
}

.services-submenu{
  position: absolute;
  z-index: 10000;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  background: var(--navy);
  box-shadow: 0 18px 48px rgba(0,0,0,0.4);
}

.services-submenu[hidden],
.mobile-services-submenu[hidden]{
  display: none !important;
}

.nav-links .services-submenu a{
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.86);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
}

.nav-links .services-submenu a:hover,
.nav-links .services-submenu a:focus-visible,
.nav-links .services-submenu a[aria-current="page"]{
  background: rgba(255,255,255,0.09);
  color: #fff;
}

.mobile-services{
  width: 100%;
}

.mobile-services-toggle{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: 0.10em;
  text-align: left;
  text-transform: uppercase;
}

.mobile-services-toggle:hover,
.mobile-services-toggle:focus-visible,
.mobile-services-toggle[aria-expanded="true"]{
  background: rgba(255,255,255,0.06);
}

.mobile-services-submenu{
  padding: 4px 0 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.14);
}

.mobile-menu .mobile-services-submenu a{
  display: block;
  padding: 11px 18px;
  border-bottom: 0;
  color: rgba(255,255,255,0.86);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.mobile-menu .mobile-services-submenu a[aria-current="page"]{
  color: #fff;
  background: rgba(255,255,255,0.07);
}

@media (max-width: 520px){
  .hero-eyebrow{ font-size: 15px; }
}

/* Header logo: larger + high contrast */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand .logo-mark{
  height: 44px;
  width: auto;
  opacity: 0.95;
}
.brand .logo-word{
  height: 36px;
  width: auto;
  /* turn dark artwork into white for nav */
  
  opacity: 0.98;
}

/* Footer logo: full logo, white for readability */
.footer .footer-logo{
  height: 76px !important;
  width: auto;
  filter: none;
  opacity: 0.98;
}


/* Site-wide ghosted 55 pattern */

/* Footer links match header nav style */


/* Unified slanted 55 background (less dense, more spacing). Light sections cover it with solid backgrounds. */
html{ scroll-behavior: smooth; }

/* Slanted 55 background: seamless across navy sections. Light sections cover it with solid backgrounds. */


body > *{ position: relative; z-index: 1; }

@media (max-width: 980px){
  
}

/* Footer menu matches header (Bebas Neue) */
.footer .links a{
  font-family: "Bebas Neue", var(--font-head) !important;
  font-size: 18px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82) !important;
  padding: 10px 10px;
  border-radius: 10px;
  display: inline-block;
}
.footer .links a:hover{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,1) !important;
  text-decoration: none !important;
}

/* Global slanted 55 background layer (always visible behind navy sections) */
html, body {
  background-color: var(--navy);
}

main, header, footer {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  }



html, body { background-color: var(--navy); }

/* Header logo uses mustard cutout version for consistency */
.brand .logo-mark, .brand .logo-word{
  filter: none !important;
}
.brand .header-logo{
  height: 46px;
  width: auto;
}

/* Force header logo mustard + larger */
.brand img.header-logo{
  height: 56px !important;
  width: auto !important;
  display: block;
}


/* Slanted 55 background - high visibility, seamless */
main, header, footer { position: relative; z-index: 1; }
@media (max-width: 980px){
  }



/* Navy texture (visible but subtle): film grain + soft vignette on navy sections only */
.section{
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.14) 72%, rgba(0,0,0,0.22) 100%),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
}
.footer, .nav{
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.18) 78%, rgba(0,0,0,0.28) 100%),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
}
.section.light{
  background: #fff !important;
  background-image: none !important;
}

/* Process cards styling update */
.step{
  background: var(--mustard) !important;
  border: 2px solid var(--navy) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.step h3,
.step h4{
  font-family: var(--font-head) !important;
  font-size: 20px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--navy) !important;
  margin-bottom: 10px !important;
  position: relative;
}
.step h3::after,
.step h4::after{
  content:"";
  display:block;
  width: 34px;
  height: 2px;
  background: var(--navy);
  margin-top: 8px;
  opacity: 0.85;
}
.step p{
  color: rgba(47,60,80,0.88) !important;
  font-size: 14.5px !important;
}

/* Footer menu - authoritative */
.footer .links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.footer .links a{
  font-family: var(--font-head) !important;
  font-size: 18px !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86) !important;
  padding: 10px 12px;
  border-radius: 10px;
  line-height: 1;
}
.footer .links a:hover{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,1) !important;
  text-decoration: none !important;
}

/* Subtle scroll reveal */
.reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal.work-lcp-visible{
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Footer menu final lock */
.footer .links a{
  font-family: "Bebas Neue", var(--font-head) !important;
  font-size: 18px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* Active state for Blog navigation */
.nav-links a.active { background: rgba(255,255,255,0.08); color: #fff; }


/* ===== Bundle A + B additions: trust, offers, pricing, timeline ===== */
.client-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.client-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(47,60,80,0.14);
  background: rgba(47,60,80,0.04);
  color:#101418;
  font-size:14px;
  font-weight:700;
}

.trust-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(47,60,80,0.14);
  background: rgba(47,60,80,0.04);
  padding: 22px;
}

.stats-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.stat{
  border-radius: 16px;
  border: 1px solid rgba(47,60,80,0.14);
  background:#fff;
  padding: 14px;
}
.stat-num{
  font-family: var(--font-head);
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.stat-label{
  margin-top:6px;
  font-size: 13px;
  color: rgba(16,20,24,0.72);
}

.contact-direct{
  display:flex;
  flex-wrap:wrap;
  gap:14px 18px;
  margin: 12px 0 4px;
}
.contact-direct a{
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
}

.offer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}
.offer-card .offer-lede{
  margin: 10px 0 12px !important;
  color: rgba(47,60,80,0.88) !important;
  font-size: 14.5px !important;
}
.offer-list{
  margin: 0 0 12px;
  padding-left: 18px;
}
.offer-list li{
  margin: 6px 0;
  color: rgba(47,60,80,0.88);
  font-size: 14.5px;
}
.offer-meta{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(47,60,80,0.18);
  font-weight: 800;
  color: var(--navy);
}
.offer-meta span{
  font-family: var(--font-head);
  letter-spacing:0.08em;
  text-transform: uppercase;
  font-size: 16px;
}

.service-page{
  --radius2: 8px;
}

.service-page .section{
  padding-top: clamp(48px, 5.5vw, 76px);
  padding-bottom: clamp(48px, 5.5vw, 76px);
}

.service-page .section.tight,
.service-page .section.compact{
  padding-top: clamp(36px, 4.5vw, 58px);
  padding-bottom: clamp(36px, 4.5vw, 58px);
}

.service-page main > .section:first-child{
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(36px, 4.5vw, 58px);
}

.service-page .h1{
  font-size: clamp(40px, 6vw, 78px);
  line-height: 0.95;
}

.service-page main > .section:first-child .p{
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
}

.service-page .offer-card{
  background: #f3c735 !important;
  border-color: rgba(47,60,80,0.18) !important;
}

.service-page .offer-card h3,
.service-page .offer-card h4,
.service-page .offer-card p,
.service-page .offer-card li,
.service-page .offer-card .offer-meta{
  color: var(--navy) !important;
}

.service-page .offer-meta{
  border-top-color: rgba(47,60,80,0.24);
}

.service-page .footer{
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.18) 78%, rgba(0,0,0,0.28) 100%),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
}

.service-page .footer-grid{
  grid-template-columns: minmax(180px, 0.75fr) minmax(390px, 1.2fr) minmax(230px, 0.8fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.service-page .footer .links{
  gap: 14px 20px;
}

.service-page .footer-business{
  margin-top: 10px;
  align-self: start;
}

@media (max-width: 900px){
  .service-page .footer-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .service-page .footer .links{
    justify-content: flex-start;
  }
}

.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 16px;
}
.pricing-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(47,60,80,0.14);
  background: rgba(47,60,80,0.04);
  padding: 18px;
}
.pricing-title{
  font-family: var(--font-head);
  font-size: 20px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--navy);
  margin:0 0 10px;
}
.pricing-range{
  font-family: var(--font-head);
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: #101418;
  margin: 0 0 10px;
}
.pricing-note{
  font-size: 14px;
  color: rgba(16,20,24,0.72);
  margin: 0;
}

.timeline-list{
  margin: 14px 0 0;
  padding-left: 18px;
}
.timeline-list li{
  margin: 10px 0;
  color: rgba(16,20,24,0.84);
}

.rush-note{
  margin-top: 18px;
  border-radius: var(--radius2);
  border: 1px dashed rgba(47,60,80,0.28);
  background: rgba(212,160,23,0.12);
  padding: 18px;
}
.rush-note strong{ color:#101418; }

@media (max-width: 980px){
  .offer-grid, .pricing-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr; }
}


/* ===== Client marquee ===== */
.client-marquee{
  margin-top:16px;
  border-radius: 0;
  background: var(--navy);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.12);
}
.client-marquee .marquee-track{
  display:flex;
  gap:28px;
  padding: 14px 18px;
  align-items:center;
  white-space: nowrap;
  animation: marqueeScroll 40s linear infinite;
}
.client-marquee span{
  font-family: var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(255,255,255,0.72);
}
@keyframes marqueeScroll{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* ===== Trusted section spacing tweaks ===== */
#trusted.section{
  padding-top: 56px;
  padding-bottom: 56px;
}
#trusted .container.split{
  gap: 26px;
}
#trusted .client-marquee{
  margin-top: 18px;
  border-radius: 0;
}
#trusted .client-marquee .marquee-track{
  padding-top: 12px;
  padding-bottom: 12px;
}


/* ===== Full-width marquee ===== */
.client-marquee.full-width{
  width: 100%;
  margin-left: 0;
  transform: none;
  border-radius: 0;
  background: var(--navy);
}
.client-marquee.full-width .marquee-track{
  padding-left: 40px;
  padding-right: 40px;
}


/* ===== Marquee edge fade ===== */
.client-marquee{
  position: relative;
}
.client-marquee::before,
.client-marquee::after{
  content:"";
  position:absolute;
  top:0;
  width:70px;
  height:100%;
  pointer-events:none;
  z-index:2;
}
.client-marquee::before{
  left:0;
  background: linear-gradient(to right, var(--navy), rgba(47,60,80,0));
}
.client-marquee::after{
  right:0;
  background: linear-gradient(to left, var(--navy), rgba(47,60,80,0));
}
@media (max-width: 600px){
  .client-marquee::before,
  .client-marquee::after{
    width:46px;
  }
}
/* ===== Trusted spacing and width tweaks v77 ===== */
#trusted .trusted-spacer{ height: 18px; }

#trusted .trust-card{
  width: 100%;
  box-sizing: border-box;
}

/* Reduce excess vertical padding on mobile, especially in dark sections */
@media (max-width: 640px){
  .section{ padding-top: 56px; padding-bottom: 56px; }
  .section.light{ padding-top: 56px; padding-bottom: 56px; }
  /* Slightly tighter gaps inside homepage process and about blocks */
  .split{ gap: 18px; }
}
/* ===== Desktop spacing tweaks v78 ===== */
/* Tighten vertical rhythm across sections without changing layout */
.section{ padding-top: 72px; padding-bottom: 72px; }
.section.light{ padding-top: 72px; padding-bottom: 72px; }

/* Trusted section: keep slightly tighter than default */
#trusted.section{ padding-top: 64px; padding-bottom: 64px; }

/* Trust card: match the feel of other full-width cards within its column */
#trusted .trust-card{
  width: 100%;
  max-width: 560px;
}
@media (max-width: 980px){
  #trusted .trust-card{ max-width: none; }
}
/* ===== Trusted layout v79 ===== */
#trusted .trusted-head{
  max-width: 900px;
  margin: 0 auto 10px;
  text-align: center;
}
#trusted .trusted-head .h2{ margin-bottom: 12px; }
#trusted .trusted-head .p{ margin-left: auto; margin-right: auto; }

#trusted .trust-card.trust-center{
  margin: 26px auto 0;
  width: 100%;
  max-width: 1100px;
}
#trusted .trust-card.trust-center .kicker,
#trusted .trust-card.trust-center .h3,
#trusted .trust-card.trust-center .p{
  text-align: center;
}
#trusted .trust-card.trust-center .stats-grid{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
/* ===== Marquee sizing fix v80 ===== */
.client-marquee.full-width .marquee-track{
  padding-top: 10px;
  padding-bottom: 10px;
}
.client-marquee::before,
.client-marquee::after{
  height: 100%;
}

.client-marquee.full-width{ margin-bottom: 0; }
/* ===== Trusted cleanup v81 ===== */
#trusted .trust-card.trust-center{
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
#trusted .stats-grid{ margin-top: 18px; }
#trusted .stat{
  border-radius: 0;
}
#trusted .stat-label{
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 12px;
}

#trusted .trust-card.trust-center p{ text-align:center; }


/* ===== Core offerings list layout ===== */
.core-offerings-list{
  columns: 2;
  column-gap: 36px;
  margin-top: 16px;
  padding-left: 18px;
}
.core-offerings-list li{
  break-inside: avoid;
  margin: 10px 0;
}
@media (max-width: 780px){
  .core-offerings-list{ columns: 1; }
}

/* experience-line-center v83 */
#trusted .trust-card.trust-center p.p.muted{ text-align:center !important; }

.section.compact{ padding-top: 40px; }
/* experience-line-center v84 */
#trusted .trust-card.trust-center{
  text-align: center;
}
#trusted .trust-card.trust-center p.p.muted{
  display: block;
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}


/* process step paragraph color v86 */
.process .step p{ color:#101418 !important; }
/* hero subhead width v87 */
.hero .p.muted{
  max-width: 720px;
}
@media (max-width: 780px){
  .hero .p.muted{ max-width: 100%; }
}
/* stats card padding v87 */
#trusted .stat{ padding: 12px; }
#trusted .stat-num{ font-size: 20px; }
/* ===== Mobile polish v89 ===== */

/* Hero text: add breathing room on small screens */
@media (max-width: 520px){
  .hero .container{ padding-left: 22px; padding-right: 22px; }
}

/* Header on mobile: show nav links, hide large CTA */
@media (max-width: 820px){
  .nav-inner{ flex-wrap: wrap; }
  .nav-links{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin-top: 10px;
    order: 3;
  }
  .nav-links a{ padding: 8px 10px; }
  header.nav .cta.primary{ display: none; }
  header.nav .cta.ghost{ display: none; }
}

/* Marquee speed: faster on mobile so it does not feel stuck */
@media (max-width: 600px){
  .client-marquee .marquee-track{ animation-duration: 24s; }
}

/* By the numbers: 2-card layout */
#trusted .stats-grid{
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px){
  #trusted .stats-grid{ grid-template-columns: 1fr; }
}

/* Footer nav: prevent awkward stacking */
footer .footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 22px;
  justify-content:center;
}
@media (max-width: 520px){
  footer .footer-nav{ gap: 10px 18px; }
  footer .footer-nav a{ padding: 6px 8px; }
}

/* Footer nav fallback if class differs */
footer nav{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 22px;
  justify-content:center;
}
/* ===== mobile nav v91 ===== */
.nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.12);
  align-items:center;
  justify-content:center;
  gap:6px;
}
.nav-toggle span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,0.92);
  border-radius: 2px;
}
.mobile-menu{
  display:none;
}

@media (max-width: 820px){
  .nav-links{ display:none !important; }
  header.nav .cta.primary{ display:none !important; }
  header.nav .cta.ghost{ display:none !important; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .nav-inner{ align-items:center; }
  .mobile-menu{
    display:flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(0,0,0,0.22);
  }
  .mobile-menu[hidden]{ display:none; }
  .mobile-menu a{
    padding: 10px 12px;
    border-radius: 12px;
    color: rgba(255,255,255,0.92);
    text-decoration:none;
  }
  .mobile-menu a:hover{ background: rgba(255,255,255,0.08); color:#fff; }
}

/* ===== footer nav v91 ===== */
.footer .links{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 22px;
  justify-content:flex-end;
}
@media (max-width: 680px){
  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .footer .links{
    justify-content:center;
    gap: 12px 18px;
  }
}
/* ===== Mobile nav v92 ===== */

/* Cleaner hamburger */
.nav-toggle{
  display:none;
  background: none;
  border: none;
  width: 32px;
  height: 24px;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:#fff;
  border-radius:2px;
}

/* Mobile behavior */
@media (max-width: 820px){
  .nav-links{ display:none !important; }
  header.nav .cta.primary{ display:none !important; }
  header.nav .cta.ghost{ display:none !important; }
  .nav-toggle{ display:flex; margin-left:auto; }

  .mobile-menu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:0;
    background: var(--navy);
    border-top:1px solid rgba(255,255,255,0.12);
  }

  .mobile-menu[hidden]{ display:none; }

  .mobile-menu a{
    padding:14px 18px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    color:#fff;
    text-decoration:none;
  }

  .mobile-menu a:hover{
    background: rgba(255,255,255,0.06);
  }
}

/* Footer nav fix */
footer nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
  justify-content:center;
}
@media (max-width:680px){
  footer nav{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
}
/* ===== Mobile menu polish v93 ===== */
@media (max-width: 820px){
  header.nav{ position: sticky; top: 0; z-index: 9999; }
  .nav-inner{ position: relative; }
  .nav-toggle{
    width: 40px;
    height: 34px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.14);
  }
  .nav-toggle span{
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,0.95);
  }
  .mobile-menu{
    position: fixed;
    left: 0;
    right: 0;
    top: 68px;
    width: 100%;
    border-radius: 0;
    background: var(--navy);
    z-index: 9998;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  }
  .mobile-menu a{
    font-family: var(--font-head);
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
}

/* Footer nav polish v93 */
@media (max-width: 680px){
  .footer .links{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px 10px;
    justify-items: center;
    text-align:center;
  }
}
@media (max-width: 420px){
  .footer .links{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* ===== Client logo marquee v98 ===== */
.client-marquee{ overflow:hidden; }
.client-marquee .marquee-track{
  display:flex;
  align-items:center;
  gap:36px;
  padding: 10px 18px;
  width: max-content;
  will-change: transform;
  animation: none;
}
.client-marquee img.client-logo{
  height: 30px;
  width: auto;
  opacity: 0.78;
  flex: 0 0 auto;
  transition: opacity 0.2s ease;
}
.client-marquee img.client-logo:hover{ opacity:1; }

@keyframes marqueeScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@media (max-width: 600px){
  .client-marquee .marquee-track{ gap:24px; padding: 8px 14px; animation-duration: 22s; }
  .client-marquee img.client-logo{ height: 24px; }
  .client-marquee img.client-logo.brandt,
  .client-marquee img.client-logo.asati{ height: 20px; }
}

/* ===== Client logo marquee v100 ===== */
.client-marquee{
  overflow:hidden;
  position: relative;
}
.client-marquee .marquee-inner{
  display:flex;
  width: max-content;
  will-change: transform;
  animation: marqueeSlide 55s linear infinite;
}
.client-marquee .marquee-track{
  display:flex;
  align-items:center;
  gap: 52px;
  padding: 10px 26px;
  min-width: 100vw;
  box-sizing: border-box;
  justify-content: space-around;
  flex: 0 0 auto;
}
@keyframes marqueeSlide{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.client-marquee img.client-logo{
  height: 30px;
  width: auto;
  opacity: 0.78;
  flex: 0 0 auto;
  transition: opacity 0.2s ease;
}
.client-marquee img.client-logo:hover{ opacity: 1; }

.client-marquee img.client-logo.brandt,
.client-marquee img.client-logo.asati{
  height: 22px;
}

@media (max-width: 600px){
  .client-marquee .marquee-inner{ animation-duration: 40s; }
  .client-marquee .marquee-track{
    gap: 36px;
    padding: 8px 16px;
  }
  .client-marquee img.client-logo{ height: 24px; }
  .client-marquee img.client-logo.brandt,
  .client-marquee img.client-logo.asati{ height: 18px; }
}
/* ===== Marquee mobile stability v104 ===== */
.client-marquee{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.client-marquee .marquee-inner{
  display:flex;
  width: max-content;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  animation-timing-function: linear;
}
@keyframes marqueeSlide{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-50%,0,0); }
}

@media (max-width: 600px){
  /* Give the bar more vertical room so logos are never clipped */
  .client-marquee .marquee-track{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    align-items: center !important;
  }
  .client-marquee img.client-logo{
    height: 22px !important;
    width: auto !important;
    max-height: 22px !important;
  }
  .client-marquee img.client-logo.oshea{ width: 61px !important; }
  .client-marquee img.client-logo.henson-robinson{ width: 71px !important; }
  .client-marquee img.client-logo.bb-electric{ width: 79px !important; }
  .client-marquee img.client-logo.route-48{ width: 65px !important; }
  .client-marquee img.client-logo.llcc{ width: 131px !important; }
  .client-marquee img.client-logo.brandt{ width: 109px !important; }
  .client-marquee img.client-logo.tillamook{ width: 84px !important; }
  .client-marquee img.client-logo.asati{ width: 150px !important; }
  .client-marquee img.client-logo.evergreen{ width: 73px !important; }
  .client-marquee img.client-logo.all-weather{ width: 118px !important; }
  .client-marquee img.client-logo.petersburg{ width: 107px !important; }
  /* Prevent iOS from dropping the layer mid-animation */
  .client-marquee .marquee-inner{
    transform: translate3d(0,0,0);
  }
}

/* ===== Client marquee mobile stability v105 ===== */
@media (max-width: 600px){
  .client-marquee.full-width{
    width: 100%;
    margin-left: 0;
    transform: translateZ(0);
  }
  .client-marquee .marquee-inner{
    animation: marqueeSlide 22.5s linear infinite;
  }
  .client-marquee .marquee-track{
    animation: none !important;
    flex: 0 0 auto;
    gap: 28px;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .client-marquee::before,
  .client-marquee::after{
    width: 32px;
  }
}

/* ===== Homepage mobile section dividers ===== */
.home-page main > .section + .section{
  position: relative;
}

@media (max-width: 640px){
  .home-page main > .section + .section::before{
    content: "";
    position: absolute;
    top: 0;
    left: var(--pad);
    right: var(--pad);
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(244,239,228,0.16) 18%,
      rgba(212,160,23,0.32) 50%,
      rgba(244,239,228,0.16) 82%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .home-page main > .section.light::before{
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(47,60,80,0.14) 18%,
      rgba(212,160,23,0.28) 50%,
      rgba(47,60,80,0.14) 82%,
      transparent 100%
    );
  }
}

/*
Hide HubSpot Free Form Branding
*/

.hs-form__powered-by,
.hs-form__footer,
.hs-form .hs-richtext,
.hs-form .hs-form-footer {
  display: none !important;
}

/* Netlify redeploy trigger */


/* Homepage contact form polish */
#contact-form-home{
  padding: 22px;
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
}
.section.light #contact-form-home{
  background: #fff;
  border-color: rgba(47,60,80,0.14);
  box-shadow: 0 22px 60px rgba(16,20,24,0.08);
}

#contact-form-home .field input,
#contact-form-home .field select,
#contact-form-home .field textarea{
  min-height: 48px;
  padding-left: 18px;
  padding-right: 18px;
}

#contact-form-home .field select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
  /* caret */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position: right 18px center, right 12px center;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
}
.section.light #contact-form-home .field select{
  background-color: #fff;
  border-color: rgba(47,60,80,0.14);
  color: #101418;
}

#contact-form-home .field input:focus,
#contact-form-home .field textarea:focus,
#contact-form-home .field select:focus{
  border-color: var(--mustard);
  box-shadow: 0 0 0 4px rgba(212,160,23,0.16);
}

/* Blog article media */
.blog-article{
  max-width: 820px;
}
.blog-article .p a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-meta{
  margin-top: 12px;
  margin-bottom: 0;
}
.blog-title{
  max-width: 100%;
  overflow-wrap: normal;
  text-wrap: balance;
}
.blog-card-title,
.blog-card-title a{
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.blog-index-card,
.blog-index-card *{
  min-width: 0;
}
.blog-card-excerpt{
  max-width: 100%;
  overflow-wrap: break-word;
}
.blog-hero-media,
.blog-figure{
  margin: 28px 0;
}
.blog-hero-media{
  margin-top: 34px;
}
.blog-hero-media picture,
.blog-figure picture{
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #0b0f14;
  box-shadow: 0 18px 54px rgba(16,20,24,0.14);
}
.blog-hero-media img,
.blog-figure img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.blog-figure figcaption{
  margin-top: 10px;
  color: rgba(16,20,24,0.62);
  font-size: 13px;
  line-height: 1.55;
}
.blog-pullquote{
  margin: 30px 0;
  padding: 26px 28px;
  border-left: 5px solid var(--mustard);
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 18px 50px rgba(16,20,24,0.08);
}
.blog-pullquote p{
  margin: 0;
  color: #101418;
  font-size: 26px;
  line-height: 1.25;
}
.blog-pullquote cite{
  display: block;
  margin-top: 16px;
  color: rgba(16,20,24,0.66);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blog-image-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.blog-image-grid .blog-figure{
  margin: 0;
}
.blog-checklist{
  margin-top: 10px;
  padding-left: 22px;
}
.blog-checklist li{
  margin-bottom: 8px;
}
@media (max-width: 700px){
  .blog-article{
    max-width: calc(100vw - 48px);
  }
  .blog-article .p{
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .blog-hero-media,
  .blog-figure{
    margin: 24px 0;
  }
  .blog-pullquote{
    padding: 22px 20px;
  }
  .blog-pullquote p{
    font-size: 22px;
  }
  .blog-title{
    font-size: 38px;
    line-height: 1;
    letter-spacing: 0.01em;
  }
  .blog-card-title{
    max-width: calc(100vw - 92px);
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.01em;
  }
  .blog-index-card{
    max-width: calc(100vw - 48px);
  }
  .blog-card-excerpt{
    max-width: 270px;
  }
  .blog-image-grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px){
  .blog-article{
    max-width: 360px;
  }
}

/* Homepage cinematic redesign sample */
.home-redesign{
  --home-ink: var(--navy);
  --home-charcoal: #34445c;
  --home-bark: var(--navy2);
  --home-paper: #f4efe4;
  --home-paper-2: #e7dece;
  --home-sage: #465646;
  --home-rust: #a95831;
  --home-line: rgba(244,239,228,0.18);
  --home-shadow: 0 28px 90px rgba(47,60,80,0.34);
  --radius2: 8px;
  background-color: var(--home-ink);
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0.025) 0%, rgba(47,60,80,0.18) 78%, rgba(47,60,80,0.28) 100%),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  color: var(--home-paper);
}

.home-redesign .nav{
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.18) 78%, rgba(0,0,0,0.28) 100%),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  border-bottom: 1px solid rgba(244,239,228,0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.home-redesign .nav-links a,
.home-redesign .mobile-menu a{
  letter-spacing: 0.08em;
}

.home-redesign .cta{
  min-height: 46px;
  border-color: rgba(244,239,228,0.24);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.home-redesign .cta:hover{
  transform: translateY(-1px);
}

.home-redesign .cta:focus-visible,
.home-redesign a:focus-visible,
.home-redesign button:focus-visible,
.home-redesign input:focus-visible,
.home-redesign textarea:focus-visible,
.home-redesign select:focus-visible{
  outline: 3px solid rgba(212,160,23,0.78);
  outline-offset: 3px;
}

.home-redesign .section{
  position: relative;
  overflow: hidden;
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(48px, 6vw, 84px);
  background-color: var(--home-charcoal);
  background-image:
    radial-gradient(circle at 18% 18%, rgba(212,160,23,0.12), transparent 28%),
    radial-gradient(circle at 84% 10%, rgba(57,72,95,0.22), transparent 30%),
    linear-gradient(180deg, rgba(47,60,80,0.08), rgba(31,43,61,0.28)),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: cover, cover, cover, auto;
}

.home-redesign .section.tight{
  padding-top: clamp(34px, 4vw, 56px);
  padding-bottom: clamp(34px, 4vw, 56px);
}

.home-redesign .section.light{
  background: var(--home-paper) !important;
  color: var(--home-ink);
}

.home-redesign .section.light .h2,
.home-redesign .section.light .h3{
  color: var(--home-ink);
}

.home-redesign .section.light .muted{
  color: rgba(47,60,80,0.72);
}

.home-redesign .h1,
.home-redesign .h2,
.home-redesign .h3{
  letter-spacing: 0;
}

.home-redesign .h2{
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.88;
}

.home-redesign .h3{
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.9;
}

.home-redesign .p{
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.72;
}

.home-redesign .kicker{
  color: rgba(244,239,228,0.68);
  letter-spacing: 0.16em;
}

.home-redesign .section.light .kicker{
  color: rgba(47,60,80,0.58) !important;
}

.home-redesign .title-accent{
  color: var(--mustard);
}

.home-redesign .hero{
  min-height: clamp(500px, calc(100vh - 220px), 720px);
  align-items: center;
  border-bottom: 1px solid rgba(244,239,228,0.12);
  isolation: isolate;
}

.home-redesign .hero-media{
  background-color: var(--home-ink);
}

.home-redesign .hero-media video{
  filter: saturate(0.86) contrast(1.08) brightness(0.76);
  transform-origin: center;
}

.home-redesign .hero-media::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url('/assets/immutable/aeb9ada170e50af7/grain.png') repeat;
  opacity: 0.22;
  mix-blend-mode: overlay;
}

.home-redesign .hero-media::after{
  z-index: 2;
  background:
    radial-gradient(circle at 72% 28%, rgba(212,160,23,0.14), transparent 24%),
    linear-gradient(90deg, rgba(47,60,80,0.86) 0%, rgba(47,60,80,0.62) 36%, rgba(47,60,80,0.2) 70%, rgba(47,60,80,0.48) 100%),
    linear-gradient(0deg, rgba(47,60,80,0.9) 0%, rgba(47,60,80,0.16) 44%, rgba(47,60,80,0.48) 100%);
}

.home-redesign .hero-inner{
  z-index: 4;
  padding-top: clamp(42px, 5vh, 86px);
  padding-bottom: clamp(36px, 6vh, 82px);
}

.home-redesign .h1{
  max-width: 990px;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: clamp(46px, 6.7vw, 96px);
  line-height: 0.92;
  color: var(--home-paper);
  text-shadow: 0 18px 54px rgba(0,0,0,0.48);
}

.home-redesign .lede{
  max-width: 700px;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 2px solid rgba(212,160,23,0.72);
  color: rgba(244,239,228,0.88);
  font-size: clamp(15px, 1.35vw, 18px);
}

.home-redesign .hero-actions{
  gap: 14px;
}

.video-embed-placeholder,
.featured-video-card .thumb iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(244,239,228,0.18);
  border-radius: 8px;
  background: var(--home-charcoal);
  box-shadow: var(--home-shadow);
  overflow: hidden;
}

.video-embed-placeholder{
  position: relative;
  display: block;
  padding: 0;
  color: var(--home-paper);
  cursor: pointer;
}

.video-embed-placeholder::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(47,60,80,0.62), rgba(47,60,80,0.08) 58%),
    url('/assets/immutable/aeb9ada170e50af7/grain.png') repeat;
  opacity: 0.78;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.video-embed-placeholder:hover::after{
  opacity: 0.58;
}

.video-embed-placeholder picture,
.video-embed-placeholder img{
  display: block;
  width: 100%;
  height: 100%;
}

.video-embed-placeholder img{
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 260ms ease, filter 260ms ease;
}

.video-embed-placeholder:hover img{
  transform: scale(1.015);
  filter: saturate(1) contrast(1.08);
}

.video-play{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  border: 1px solid rgba(244,239,228,0.72);
  border-radius: 50%;
  background: rgba(47,60,80,0.68);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.video-play::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid var(--mustard);
  transform: translate(-38%, -50%);
}

.video-embed-placeholder:hover .video-play{
  border-color: var(--mustard);
  background: rgba(47,60,80,0.82);
  transform: translate(-50%, -50%) scale(1.04);
}

.home-section-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.home-section-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.home-redesign .home-featured{
  background-color: var(--home-ink);
  padding-top: clamp(36px, 4.5vw, 72px);
}

.home-redesign .home-featured .featured-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.home-redesign .card{
  position: relative;
  border-color: rgba(244,239,228,0.16);
  border-radius: 8px;
  background-color: rgba(47,60,80,0.62);
  background-image:
    linear-gradient(160deg, rgba(244,239,228,0.075), rgba(244,239,228,0.025)),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  box-shadow: none;
}

.home-redesign .card::before{
  content: "";
  position: absolute;
  inset: 10px 10px auto 10px;
  z-index: 2;
  height: 5px;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(244,239,228,0.42) 0 5px, transparent 5px 13px);
  opacity: 0.42;
}

.home-redesign .card:hover{
  box-shadow: var(--home-shadow);
}

.home-redesign .home-featured .card:first-child{
  grid-column: span 2;
  grid-row: span 2;
}

.home-redesign .home-featured .card:first-child .thumb{
  aspect-ratio: 16 / 10;
}

.home-redesign .featured-video-card{
  display: flex;
  flex-direction: column;
  border-color: rgba(244,239,228,0.12);
  background-color: rgba(47,60,80,0.74);
  background-image:
    linear-gradient(180deg, rgba(244,239,228,0.06), rgba(244,239,228,0.02)),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
}

.home-redesign .featured-video-card::before{
  opacity: 0.22;
}

.home-redesign .featured-video-card:hover{
  transform: translateY(-2px);
}

.featured-video-card .thumb{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border-bottom-color: rgba(244,239,228,0.1);
}

.featured-video-card .thumb .video-embed-placeholder,
.featured-video-card .thumb iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.featured-video-card .card-body{
  flex: 0 0 auto;
  padding: 18px 22px 20px;
}

.featured-video-card .card-title{
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.02;
  letter-spacing: 0;
}

.featured-video-card .card-sub{
  max-width: 520px;
  color: rgba(244,239,228,0.58);
  font-size: 15px;
  line-height: 1.55;
}

.home-redesign .thumb{
  aspect-ratio: 16 / 11;
  border-bottom: 1px solid rgba(244,239,228,0.14);
  background-color: var(--navy);
  background-image: url('/assets/immutable/aeb9ada170e50af7/grain.png');
}

.home-redesign .thumb img{
  filter: saturate(0.9) contrast(1.05);
}

.home-redesign .card-body{
  padding: 20px;
}

.home-redesign .card-title{
  color: var(--home-paper);
  font-size: 19px;
}

.home-redesign .card-sub{
  color: rgba(244,239,228,0.64);
}

.home-redesign .home-trusted{
  background: linear-gradient(180deg, var(--home-paper), var(--home-paper-2)) !important;
}

.home-redesign .home-trusted::before{
  content: "";
  position: absolute;
  right: -90px;
  top: 28px;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  background: url('/assets/immutable/a9182f27898c3fc2/55mark.svg') no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}

.home-redesign #trusted .trusted-head{
  position: relative;
  max-width: 980px;
}

.home-redesign #trusted .client-marquee{
  margin-top: 34px;
  border-top: 1px solid rgba(244,239,228,0.16);
  border-bottom: 1px solid rgba(244,239,228,0.16);
  border-left: 0;
  border-right: 0;
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0.025) 0%, rgba(47,60,80,0.2) 78%, rgba(47,60,80,0.3) 100%),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
}

.home-redesign #trusted .client-marquee::before{
  background: linear-gradient(to right, var(--navy), rgba(47,60,80,0));
}

.home-redesign #trusted .client-marquee::after{
  background: linear-gradient(to left, var(--navy), rgba(47,60,80,0));
}

.home-redesign #trusted .trust-card.trust-center{
  position: relative;
  margin-top: 30px;
}

.home-redesign #trusted .stats-grid{
  gap: 14px;
}

.home-redesign #trusted .stat{
  border: 1px solid rgba(244,239,228,0.16);
  border-radius: 8px;
  background-color: var(--navy);
  background-image:
    linear-gradient(160deg, rgba(244,239,228,0.08), rgba(244,239,228,0.025)),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  box-shadow: 0 22px 70px rgba(47,60,80,0.18);
}

.home-redesign #trusted .stat-num{
  color: var(--mustard);
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing: 0;
}

.home-redesign #trusted .stat-label{
  color: rgba(244,239,228,0.7);
}

.home-approach{
  background: linear-gradient(180deg, var(--home-paper), var(--home-paper-2)) !important;
  padding-top: clamp(44px, 5vw, 76px) !important;
  padding-bottom: clamp(44px, 5vw, 76px) !important;
}

.home-approach-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.home-approach-copy{
  position: relative;
  z-index: 2;
}

.home-approach-text{
  max-width: 680px;
}

.home-approach-services{
  border-top: 1px solid rgba(47,60,80,0.2);
}

.home-approach .list{
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
  border-top: 0;
}

.home-approach .list li{
  padding-left: 0;
  border-bottom: 1px solid rgba(47,60,80,0.18);
}

.home-approach .list li::before{
  display: none;
}

.home-approach .list a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  font-weight: 850;
}

.home-approach .list a::after{
  content: "";
  flex: 0 0 34px;
  height: 1px;
  background: var(--mustard);
}

.home-redesign .home-partner{
  background-color: var(--home-bark);
}

.home-partner-card{
  position: relative;
  overflow: hidden;
  min-height: 360px;
  padding: clamp(28px, 5vw, 60px);
  border-color: rgba(244,239,228,0.18);
  background:
    linear-gradient(90deg, rgba(47,60,80,0.96), rgba(47,60,80,0.82) 52%, rgba(47,60,80,0.28)),
    url('/assets/immutable/53cf8d10dff194c7/agency-production-support-bg.jpg') center / cover !important;
  color: var(--home-paper);
  box-shadow: var(--home-shadow);
}

.home-partner-card .h3,
.home-partner-card .p{
  color: var(--home-paper) !important;
}

.home-partner-card .muted{
  color: rgba(244,239,228,0.76) !important;
}

.home-partner-card .cta.ghost{
  color: var(--home-paper) !important;
  border: 1px solid rgba(244,239,228,0.24) !important;
  background: rgba(244,239,228,0.08) !important;
  padding-left: 16px;
  padding-right: 16px;
}

.home-redesign .home-process{
  background-color: var(--home-ink);
}

.home-process-grid{
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.82fr);
  align-items: start;
  gap: clamp(22px, 4vw, 48px);
}

.home-process .process{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.home-process .step{
  min-height: clamp(150px, 12vw, 168px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(18px, 2.2vw, 22px) !important;
  border: 1px solid rgba(244,239,228,0.18) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(160deg, rgba(244,239,228,0.1), rgba(244,239,228,0.035)),
    linear-gradient(180deg, rgba(212,160,23,0.08), transparent),
    url('/assets/immutable/aeb9ada170e50af7/grain.png'),
    var(--navy2) !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
  box-shadow: none !important;
}

.home-process .step h4{
  color: var(--mustard) !important;
  font-size: 24px !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 14px !important;
}

.home-process .step h4::after{
  background: rgba(212,160,23,0.8);
}

.home-process .step p{
  color: rgba(244,239,228,0.76) !important;
  margin: 0;
  line-height: 1.5 !important;
}

.home-process-media{
  position: relative;
  overflow: hidden;
  min-height: clamp(314px, 27vw, 350px);
  border: 1px solid rgba(244,239,228,0.16);
  border-radius: 8px;
  background: var(--home-bark);
}

.home-process-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(47,60,80,0), rgba(47,60,80,0.48)),
    url('/assets/immutable/aeb9ada170e50af7/grain.png') repeat;
  opacity: 0.8;
  pointer-events: none;
}

.home-process-media img{
  width: 100%;
  height: 100%;
  min-height: clamp(314px, 27vw, 350px);
  object-fit: cover;
  filter: saturate(0.88) contrast(1.08) brightness(0.86);
}

.home-cycles{
  background:
    linear-gradient(180deg, var(--home-paper-2), var(--home-paper)) !important;
  color: var(--home-ink);
}

.home-cycles-card{
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid rgba(244,239,228,0.16);
  border-left: 6px solid var(--mustard);
  background-color: var(--navy);
  background-image:
    linear-gradient(160deg, rgba(244,239,228,0.08), rgba(244,239,228,0.025)),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  box-shadow: 0 22px 70px rgba(47,60,80,0.18);
  color: var(--home-paper);
}

.home-cycles-card .h3,
.home-cycles-card .p{
  color: var(--home-paper) !important;
}

.home-cycles-card .muted{
  color: rgba(244,239,228,0.76) !important;
}

.home-redesign .home-about{
  background-color: var(--home-charcoal);
}

.home-about .split{
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1.14fr);
  gap: clamp(28px, 5vw, 70px);
}

.home-about .portrait{
  position: relative;
  border-color: rgba(244,239,228,0.16);
  border-radius: 8px;
  box-shadow: var(--home-shadow);
}

.home-about .portrait::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(47,60,80,0.02), rgba(47,60,80,0.2)),
    url('/assets/immutable/aeb9ada170e50af7/grain.png') repeat;
  pointer-events: none;
}

.home-about .portrait img{
  aspect-ratio: 16 / 10;
  filter: saturate(0.9) contrast(1.04);
}

.home-redesign .section.light.home-contact{
  background:
    linear-gradient(90deg, rgba(47,60,80,0.94), rgba(47,60,80,0.82) 48%, rgba(47,60,80,0.58)),
    url('/assets/immutable/d4408a89e24bd54d/hero-workshop.jpg') center / cover !important;
  color: var(--home-paper);
}

.home-redesign .section.light.home-contact::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 18%, rgba(212,160,23,0.18), transparent 24%),
    url('/assets/immutable/aeb9ada170e50af7/grain.png') repeat;
  opacity: 0.78;
}

.home-redesign .section.light.home-contact .container{
  position: relative;
  z-index: 2;
}

.home-contact-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.home-redesign .section.light.home-contact .h2{
  color: var(--home-paper) !important;
}

.home-redesign .section.light.home-contact .p{
  color: rgba(244,239,228,0.78);
}

.home-redesign .section.light.home-contact #hubspot-form-home{
  min-height: 1px;
}

.home-redesign .section.light.home-contact #contact-form-home{
  margin-top: 0;
  border-color: rgba(244,239,228,0.18);
  background-color: rgba(47,60,80,0.78);
  background-image:
    linear-gradient(160deg, rgba(244,239,228,0.08), rgba(244,239,228,0.025)),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  box-shadow: var(--home-shadow);
  backdrop-filter: blur(16px);
}

.home-redesign .section.light.home-contact #contact-form-home .field label{
  color: rgba(244,239,228,0.74);
}

.home-redesign .section.light.home-contact #contact-form-home .field input,
.home-redesign .section.light.home-contact #contact-form-home .field select,
.home-redesign .section.light.home-contact #contact-form-home .field textarea{
  border-color: rgba(244,239,228,0.2);
  background-color: rgba(244,239,228,0.08);
  color: var(--home-paper);
}

.home-redesign .section.light.home-contact #contact-form-home .field select option{
  color: var(--navy);
}

.home-redesign .section.light.home-contact #form-error-home{
  color: #ffd7d7;
}

.home-redesign .section.light.home-contact #contact-form-home .field input,
.home-redesign .section.light.home-contact #contact-form-home .field select,
.home-redesign .section.light.home-contact #contact-form-home .field textarea{
  padding-left: 18px;
}

.home-redesign .footer{
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.18) 78%, rgba(0,0,0,0.28) 100%),
    url('/assets/immutable/aeb9ada170e50af7/grain.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
}

.home-redesign .footer-grid{
  grid-template-columns: minmax(180px, 0.75fr) minmax(390px, 1.2fr) minmax(230px, 0.8fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.home-redesign .footer .links{
  gap: 14px 20px;
}

.footer-brand .small{
  max-width: 260px;
}

.home-redesign .footer-business{
  margin-top: 10px;
  align-self: start;
}

.footer-business__links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.footer-business__links a{
  white-space: nowrap;
}

@media (max-width: 900px){
  .home-redesign .footer-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .footer-brand .small{
    max-width: none;
  }

  .home-redesign .footer .links{
    justify-content: flex-start;
  }
}

@media (max-width: 980px){
  .home-redesign .hero{
    min-height: clamp(620px, calc(100vh - 96px), 740px);
  }

  .home-redesign .home-featured .featured-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-redesign .home-featured .card:first-child{
    grid-column: span 2;
    grid-row: auto;
  }

  .home-approach-grid,
  .home-process-grid,
  .home-about .split,
  .home-contact-grid{
    grid-template-columns: 1fr;
  }

  .home-process-media,
  .home-process-media img{
    min-height: 360px;
  }

  .home-process .process{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  .home-redesign .section{
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .home-redesign .hero{
    min-height: clamp(560px, calc(100vh - 220px), 620px);
  }

  .home-redesign .h1{
    font-size: clamp(40px, 13vw, 58px);
  }

  .home-redesign .lede{
    padding-left: 16px;
  }

  .video-play::after{
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 16px;
  }

  .home-redesign .home-featured .featured-grid,
  .home-process .process{
    grid-template-columns: 1fr;
  }

  .home-redesign .home-featured .card:first-child{
    grid-column: span 1;
  }

  .home-section-head{
    align-items: start;
  }

  .home-process-media,
  .home-process-media img{
    min-height: 300px;
  }

  .home-redesign .section.light.home-contact #contact-form-home{
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .home-redesign .hero-media video{
    display: none;
  }

  .home-redesign .hero-media{
    background-image: url('/assets/immutable/d4408a89e24bd54d/hero-workshop.jpg');
    background-size: cover;
    background-position: center;
  }

  .home-redesign .client-marquee .marquee-inner,
  .home-redesign .client-marquee .marquee-track{
    animation: none !important;
    transform: none !important;
  }
}

/* Final responsive navigation lock: keep the hamburger available anywhere the
   desktop links are hidden, including the 821–980px tablet range. */
@media (max-width: 980px){
  .nav-links{ display: none !important; }
  header.nav .cta.primary,
  header.nav .cta.ghost{ display: none !important; }
  .nav-toggle{ display: flex !important; margin-left: auto; }
  .nav-inner{ position: relative; align-items: center; }
  .mobile-menu{
    position: fixed;
    z-index: 9998;
    top: 68px;
    right: 0;
    left: 0;
    display: flex;
    width: 100%;
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    gap: 0;
    border-radius: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    background: var(--navy);
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  }
  .mobile-menu > a{
    display: block;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-family: var(--font-head);
    font-size: 18px;
    letter-spacing: 0.10em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .mobile-menu > a:hover,
  .mobile-menu > a:focus-visible{
    background: rgba(255,255,255,0.06);
  }
  .mobile-menu[hidden]{ display: none !important; }
}

/* Documentary lower-third primary CTA: dark field with a mustard cue bar. */
.cta.primary{
  padding: 14px 22px 14px 18px;
  color: #f7f4ec;
  background: rgba(16,20,24,0.9);
  border: 0;
  border-left: 5px solid var(--mustard);
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.cta.primary:hover{
  color: #101418;
  background: var(--mustard);
  filter: none;
  transform: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.24);
}

.cta.primary:active{
  background: #c69313;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

.cta.primary:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(16,20,24,0.8);
}

@media (prefers-reduced-motion: reduce){
  .cta.primary{ transition: none; }
}

/* Named-author and filmmaker authority treatment. */
.filmmaker-role{
  margin: -4px 0 18px;
  color: var(--mustard);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.filmmaker-card{
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.16);
  border-left: 5px solid var(--mustard);
  background: rgba(11,15,20,0.34);
  box-shadow: 0 18px 44px rgba(0,0,0,0.22);
}

.filmmaker-card .h3{
  max-width: 520px;
  margin-top: 12px;
}

.filmmaker-card .p{
  margin: 18px 0 0;
}

.filmmaker-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.filmmaker-list li{
  padding: 11px 0 11px 12px;
  border-left: 3px solid var(--mustard);
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-weight: 700;
}

.about-founder-heading{
  max-width: 760px;
  margin-bottom: 28px;
}

.about-founder-grid{
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.about-founder-portrait{
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-left: 5px solid var(--mustard);
  background: rgba(11,15,20,0.34);
  box-shadow: 0 18px 44px rgba(0,0,0,0.22);
}

.about-founder-portrait picture{
  display: block;
}

.about-founder-portrait img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 1453;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.about-founder-portrait::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(47,60,80,0.02), rgba(47,60,80,0.16));
}

.about-founder-copy > .p:first-child{
  margin-top: 0;
}

.about-founder-involvement{
  margin-top: 28px;
}

.content-byline{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  line-height: 1.6;
}

.content-byline a,
.article-meta a{
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--mustard);
  text-underline-offset: 4px;
}

.article-meta{
  margin-top: 14px;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  line-height: 1.65;
}

.author-section{
  padding-top: 48px;
  padding-bottom: 48px;
}

.author-box{
  max-width: 860px;
  padding: 24px 26px;
  border: 1px solid rgba(255,255,255,0.16);
  border-left: 5px solid var(--mustard);
  background: rgba(11,15,20,0.28);
}

.section.light .author-box{
  border-color: rgba(47,60,80,0.16);
  border-left-color: var(--mustard-on-light);
  background: rgba(47,60,80,0.04);
}

.author-box .h3{
  margin: 8px 0 2px;
}

.author-box .h3 a{
  color: inherit;
}

.author-box__role{
  margin: 0 0 12px;
  color: var(--mustard);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.section.light .author-box__role{
  color: var(--mustard-on-light);
}

.author-box .p{
  margin-bottom: 0;
}

.case-study-film{
  padding-top: 54px;
}

.project-facts{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 30px 0 0;
  border-top: 1px solid rgba(47,60,80,0.18);
  border-bottom: 1px solid rgba(47,60,80,0.18);
}

.project-fact{
  min-width: 0;
  padding: 18px 20px 20px 0;
}

.project-fact + .project-fact{
  padding-left: 20px;
  border-left: 1px solid rgba(47,60,80,0.18);
}

.project-fact dt{
  color: var(--mustard-on-light);
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-fact dd{
  margin: 7px 0 0;
  color: #2f3c50;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.film-transcript{
  margin-top: 26px;
  border: 1px solid rgba(47,60,80,0.18);
  background: rgba(47,60,80,0.035);
}

.film-transcript summary{
  padding: 16px 18px;
  color: #2f3c50;
  cursor: pointer;
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.film-transcript p{
  margin: 0;
  padding: 0 18px 18px;
  color: rgba(47,60,80,0.82);
  line-height: 1.75;
}

@media (max-width: 620px){
  .filmmaker-card,
  .author-box{
    padding: 20px;
  }

  .filmmaker-list{
    grid-template-columns: 1fr;
  }

  .project-facts{
    grid-template-columns: 1fr;
  }

  .project-fact,
  .project-fact + .project-fact{
    padding: 14px 0;
    border-left: 0;
  }

  .project-fact + .project-fact{
    border-top: 1px solid rgba(47,60,80,0.14);
  }
}

@media (max-width: 820px){
  .about-founder-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-founder-portrait{
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .project-facts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-fact:nth-child(3){
    padding-left: 0;
    border-top: 1px solid rgba(47,60,80,0.14);
    border-left: 0;
  }

  .project-fact:nth-child(4){
    border-top: 1px solid rgba(47,60,80,0.14);
  }
}

@media (max-width: 620px){
  .project-facts{
    grid-template-columns: 1fr;
  }

  .project-fact:nth-child(4){
    padding-left: 0;
    border-left: 0;
  }
}

/* Option 2: Barlow Condensed navigation, buttons, and homepage hero lockup. */
:root{
  --font-nav: "Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
}

.nav-links > a,
.services-toggle,
.mobile-menu > a,
.mobile-services-toggle,
.paid-nav-links a,
.footer .links a{
  font-family: var(--font-nav) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.nav-links{
  gap: 8px;
}

header.nav .nav-inner{
  width: calc(100% - 48px);
  max-width: 1444px;
  margin-inline: auto;
  padding-inline: 0;
}

.nav-links > a,
.services-toggle,
.paid-nav-links a{
  color: rgba(255,255,255,0.9) !important;
}

.nav-links .services-submenu a,
.mobile-menu .mobile-services-submenu a{
  font-family: var(--font-nav) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.cta,
.cta.primary,
.cta.ghost{
  font-family: var(--font-nav) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.cta.primary{
  min-height: 52px;
  padding: 0 22px;
}

header.nav .cta.primary{
  min-width: 218px;
  background: rgba(16,20,24,0.92);
  box-shadow: none;
}

.nav-links > a:focus-visible,
.paid-nav-links a:focus-visible,
.services-toggle:focus-visible,
.nav-toggle:focus-visible,
.mobile-menu > a:focus-visible,
.mobile-services-toggle:focus-visible,
.footer .links a:focus-visible,
.home-page .hero .cta.ghost:focus-visible{
  outline: 2px solid var(--mustard);
  outline-offset: 3px;
}

.home-page .hero{
  min-height: clamp(620px, calc(100vh - 78px), 790px);
  align-items: end;
  background: #17202c;
}

.home-page .hero-media::after{
  background:
    linear-gradient(112deg, rgba(23,32,44,0.92) 0%, rgba(38,52,72,0.70) 58%, rgba(59,72,91,0.48) 100%),
    linear-gradient(0deg, rgba(23,32,44,0.38), rgba(47,60,80,0.08) 56%, rgba(47,60,80,0.22));
}

.home-page .hero-inner{
  width: calc(100% - 48px);
  max-width: 1360px;
  margin-inline: auto;
  padding: clamp(72px, 10vh, 96px) 0 clamp(44px, 6vh, 60px);
}

.home-page .hero-eyebrow{
  margin: 0 0 20px;
  color: var(--mustard);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-page .hero .h1{
  max-width: 1080px;
  margin: 0;
  color: #f7f4ec;
  font-family: var(--font-head);
  font-size: clamp(72px, 6.5vw, 104px);
  font-weight: 400;
  letter-spacing: 0.018em;
  line-height: 0.9;
  text-shadow: 0 18px 54px rgba(0,0,0,0.42);
  text-transform: uppercase;
}

.home-page .hero .lede{
  max-width: 850px;
  margin: 28px 0 0;
  padding-left: 22px;
  border-left: 2px solid rgba(212,160,23,0.8);
  color: rgba(247,244,236,0.84);
  font-size: 19px;
  line-height: 1.55;
}

.home-page .hero .hero-actions{
  gap: 18px;
  margin-top: 32px;
}

.home-page .hero .hero-actions .cta{
  min-width: 225px;
}

.home-page .hero .cta.primary{
  color: #f7f4ec;
  background: rgba(16,20,24,0.92);
  border: 0;
  border-left: 5px solid var(--mustard);
  border-radius: 0;
  box-shadow: none;
}

.home-page .hero .cta.primary:hover{
  color: #101418;
  background: var(--mustard);
  border-left-color: var(--mustard);
  box-shadow: none;
}

.home-page .hero .cta.ghost{
  min-height: 52px;
  padding: 0 22px;
  color: #f7f4ec;
  background: rgba(16,20,24,0.15);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 0;
  text-decoration: none;
}

.home-page .hero .cta.ghost:hover{
  color: #101418;
  background: var(--mustard);
  border-color: var(--mustard);
  text-decoration: none;
}

@media (min-width: 1000px){
  .home-page .hero .h1{
    white-space: nowrap;
  }
}

@media (max-width: 980px){
  .mobile-menu > a,
  .mobile-services-toggle{
    font-size: 18px !important;
  }

  .home-page .hero-inner{
    padding-top: 64px;
    padding-bottom: 44px;
  }

  .home-page .hero .h1{
    font-size: clamp(64px, 9vw, 84px);
    white-space: normal;
  }
}

@media (max-width: 640px){
  .home-page .hero{
    min-height: clamp(560px, calc(100svh - 68px), 720px);
  }

  .home-page .hero-inner{
    width: calc(100% - 44px);
    padding: 48px 0 max(32px, env(safe-area-inset-bottom, 0px));
  }

  .home-page .hero-eyebrow{
    margin-bottom: 16px;
    font-size: 15px;
    letter-spacing: 0.16em;
  }

  .home-page .hero .h1{
    font-size: clamp(46px, 13vw, 58px);
    white-space: normal;
  }

  .home-page .hero .lede{
    margin-top: 22px;
    padding-left: 16px;
    font-size: 16px;
    line-height: 1.5;
  }

  .home-page .hero .hero-actions{
    width: min(100%, 320px);
    gap: 12px;
    margin-top: 26px;
  }

  .home-page .hero .hero-actions .cta{
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
    min-height: 50px;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 16px !important;
    letter-spacing: 0.08em !important;
  }
}

@media (max-width: 520px){
  .cta,
  .cta.primary,
  .cta.ghost{
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.15 !important;
  }

  .cta.primary{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Unified sitewide CTA system: lower-third primary and outlined secondary. */
.cta,
.cta.primary,
.cta.ghost{
  appearance: none;
  min-height: 52px;
  padding: 10px 22px;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  line-height: 1.15 !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  text-align: center;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.cta.primary,
.section.light .cta.primary,
.panel-light .cta.primary{
  color: #f7f4ec !important;
  background: rgba(16,20,24,0.92);
  border: 0;
  border-left: 5px solid var(--mustard);
}

.cta.primary:hover,
.section.light .cta.primary:hover,
.panel-light .cta.primary:hover{
  color: #101418 !important;
  background: var(--mustard);
  border-color: var(--mustard);
  text-decoration: none;
}

header.nav .cta.primary:hover,
header.nav .cta.primary:focus-visible{
  color: #101418 !important;
  background: var(--mustard);
  border-color: var(--mustard);
  box-shadow: none;
}

.cta.primary:active,
.section.light .cta.primary:active,
.panel-light .cta.primary:active{
  color: #101418 !important;
  background: #c69313;
  border-color: #c69313;
}

header.nav .cta.primary:active{
  color: #101418 !important;
  background: #c69313;
  border-color: #c69313;
}

.cta.ghost,
.cta:not(.primary):not(.ghost){
  color: #f7f4ec !important;
  background: rgba(16,20,24,0.15);
  border: 1px solid rgba(247,244,236,0.65);
}

.section.light .cta.ghost,
.section.light .cta:not(.primary):not(.ghost),
.panel-light .cta.ghost,
.panel-light .cta:not(.primary):not(.ghost){
  color: var(--navy) !important;
  background: rgba(47,60,80,0.04);
  border-color: rgba(47,60,80,0.65);
}

.cta.ghost:hover,
.cta:not(.primary):not(.ghost):hover,
.section.light .cta.ghost:hover,
.section.light .cta:not(.primary):not(.ghost):hover,
.panel-light .cta.ghost:hover,
.panel-light .cta:not(.primary):not(.ghost):hover{
  color: #101418 !important;
  background: var(--mustard);
  border-color: var(--mustard);
  text-decoration: none;
}

.cta.ghost:active,
.cta:not(.primary):not(.ghost):active,
.section.light .cta.ghost:active,
.section.light .cta:not(.primary):not(.ghost):active,
.panel-light .cta.ghost:active,
.panel-light .cta:not(.primary):not(.ghost):active{
  color: #101418 !important;
  background: #c69313;
  border-color: #c69313;
}

.cta.primary:focus-visible,
.cta.ghost:focus-visible,
.cta:not(.primary):not(.ghost):focus-visible{
  outline: 3px solid var(--mustard);
  outline-offset: 3px;
  box-shadow: none;
}

.section.light .cta.primary:focus-visible,
.section.light .cta.ghost:focus-visible,
.section.light .cta:not(.primary):not(.ghost):focus-visible,
.panel-light .cta.primary:focus-visible,
.panel-light .cta.ghost:focus-visible,
.panel-light .cta:not(.primary):not(.ghost):focus-visible{
  outline-color: var(--mustard-on-light);
}

.cta:disabled,
.cta[aria-disabled="true"]{
  opacity: 0.56;
  cursor: not-allowed;
}

@media (max-width: 520px){
  .cta,
  .cta.primary,
  .cta.ghost{
    padding: 10px 18px;
  }

  .cta + .cta{
    margin-left: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .cta,
  .cta.primary,
  .cta.ghost{
    transition: none;
  }
}