:root{
      	--maxw: 1296px;
      	--hdr-h-base: 90px;
		--hdr-h-scrolled: 80px;
		--hdr-h: var(--hdr-h-base);

      	--bg-dark: #060A12;
      	--text-dark: #222;
      	--text-light: #fff;

      	--nav-link: #fff;
      	--nav-hover: #F95457;
      	--gap: 40px;

      	--mobile-panel-w: 70vw;
      	--mobile-pad-left: 48px;
      
       	/*--main-offset: var(--hdr-h-base); */
       	--main-offset: 0px;
       
       --ui-color-ease: 300ms cubic-bezier(.4,0,.4,1);
    }

    *{ box-sizing: border-box; margin: 0; padding: 0; }
    html, body{ height: 100%; }
    body{
      	font-family: "Plus Jakarta Sans", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      	-webkit-font-smoothing: antialiased;
      	color: var(--text-dark);
      	overflow-x: hidden;
    }
	::selection{
  		background-color: #ddd;
  		color: #eec877;
  		color: #111;
	}

	/* Firefox */
	::-moz-selection{
  		background-color: #ddd;
  		color: #eec877;
  		color: #111;
	}
    /* ---------- layout helpers ---------- */
    .centered-col{
      	width: 100%;
      	max-width: var(--maxw);
      	margin: 0 auto;
      	height: 100%;
      	position: relative;
      	padding: 0;
    }
    @media (max-width: 1380px){
      .centered-col{ width: calc(100% - 48px); }
    }

    /* ---------- header ---------- */
#hdr{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hdr-h);
  z-index: 10010;
 	isolation: isolate;  /* ADD THIS */
  background: transparent;
  transition: height 180ms ease;
  transition: background 0.2s ease;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#hdr::before{
  content: "";
  position: absolute;
  inset: 0;
  transition: background-color 180ms ease;
  pointer-events: none;
  background: rgba(2,2,2,0.02);
}

#hdr.is-scrolled{
  --hdr-h: var(--hdr-h-scrolled);
  background: rgba(2, 2, 2, 0.8);
}

#hdr.is-scrolled::before{
  background: rgba(2,2,2, 0.4);
  /*
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  */
}

    header{ height: 100%; }
    .header-row{
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    #logo{
  		font-family: "Questa Light", Georgia, serif;
  		font-weight: 400;
  		font-size: 24px;
  		line-height: 1;
  		color: var(--text-light);
  		user-select: none;
  		white-space: nowrap;
  		transition: font-size 180ms ease;
	}

	#hdr.is-scrolled #logo{
  		/*font-size: 22px; */
	}
	#hdr.is-scrolled .nav-desktop a{
  		padding: 6px 0;
	}

    /* Desktop nav (right-aligned inside centered column) */
    .nav-desktop{
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--gap);
    }

    .nav-desktop a{
      	font-family: "Plus Jakarta Sans", Arial, sans-serif;
      	font-size: 15px;
      	font-weight: 500;
      	line-height: 1;
      	color: var(--nav-link);
      	text-decoration: none;
      	padding: 12px 0 8px 0;
      	transition: color var(--ui-color-ease), border-bottom-color var(--ui-color-ease);
      	display: inline-flex;
  		align-items: center;
  		border-bottom: 4px solid transparent;
    }
    .nav-desktop a:hover,
	.nav-desktop a:focus-visible{
  		border-bottom-color: var(--nav-hover);
	}
    .nav-desktop a:hover,
    .nav-desktop a:focus-visible{
      color: var(--nav-hover);
      outline: none;
    }

    /* Hamburger button */
    .hamburger{
      display: none; /* shown at <= 900px */
      cursor: pointer;
      width: 22px;
      height: 18px;
      position: relative;
      background: transparent;
      border: 0;
      padding: 0;
      z-index: 10011;
    }
    .hamburger span{
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 3px;
      background: #eee;
      border-radius: 0px;
      transition: transform 180ms ease, opacity 180ms ease, top 180ms ease, background-color 160ms ease;
    }
    .hamburger span:nth-child(1){ top: 0; }
    .hamburger span:nth-child(2){ top: 8px;}
    .hamburger span:nth-child(3){ top: 16px;}

    .hamburger:hover span{ background-color: #f2c668; }

    /* Active hamburger -> X */
    .hamburger[aria-expanded="true"] span:nth-child(1){
      top: 7.5px;
      transform: rotate(45deg);
    }
    .hamburger[aria-expanded="true"] span:nth-child(2){
      opacity: 0; /* hides center line */
    }
    .hamburger[aria-expanded="true"] span:nth-child(3){
      top: 7.5px;
      transform: rotate(-45deg);
    }

    /* Mobile flyout */
    .mobile-overlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease;
      z-index: 10000;
    }
    .mobile-panel{
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: var(--mobile-panel-w);
      max-width: 520px;
      background: rgba(22,22,24,.96);
      /*
      backdrop-filter: blur(10px);
      */
      transform: translateX(100%);
      transition: transform 180ms ease;
      transition: color var(--ui-color-ease);
      z-index: 10001;
      padding-top: calc(var(--hdr-h) + 24px);
      padding-left: var(--mobile-pad-left);
      padding-right: 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .mobile-panel a{
      font-family: "Plus Jakarta Sans", Arial, sans-serif;
      font-size: 24px;
      line-height: 1.15;
      color: var(--nav-link);
      text-decoration: none;
      padding: 10px 0;
      transition: color 160ms ease;
    }
    .mobile-panel a:hover,
    .mobile-panel a:focus-visible{
      color: var(--nav-hover);
      outline: none;
    }

    body.menu-open .mobile-overlay{
      opacity: 1;
      pointer-events: auto;
    }
    body.menu-open .mobile-panel{
      transform: translateX(0);
    }

    /* breakpoint behavior */
    @media (max-width: 900px){
      .nav-desktop{ display: none; }
      .hamburger{ display: inline-block; }
    }

    /* ---------- sections (kept close to your original) ---------- */
    main{ 
    	/*padding-top: var(--hdr-h); */
    	padding-top: var(--main-offset);
    }

    section{
      display: block;
      color: white;
    }

    #row1{
      background: var(--bg-dark);
      height: 100vh;
      position: relative;
      min-height: 828px;
    }

    .upper-border{
      width: 24px;
      border-top: 8px solid #333;
      padding: 0 0 12px 0;
      margin: 0;
      line-height: 0;
      font-size: 12px;
    }

    #row1 .slideone{
      width: 100%;
      position: absolute;
      top: 22vh;
      
    }

    #row1 h1{
      	font-size: clamp(40px, 7.6vw, 77px);
      	line-height: 1.1;
      	padding: 0 0 16px 0;
      	color: #fff;
      	max-width: 1410px;
       	max-width: 770px;
      	font-weight: 600;
      	letter-spacing: -0.75px;
      	filter: blur(6px);
  		opacity: 0.25;
  		transform: translateY(6px);
  		animation: h1-reveal 0.95s ease-out forwards;
    }
    
    /* Animation */
@keyframes h1-reveal {
  to {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
  }
}

/* Subhead line */
.hero-subhead {
  opacity: 0;
  animation: fade-in 0.35s ease-out forwards;
  animation-delay: 0.45s;
}

#hdr::before {
  pointer-events: none;
}
#hero_cta {
  position: relative;
  z-index: 5;
}

.mobile-cta-context {
  font-size: 14px;
  line-height: 1.4;
  color: #ccc;
  max-width: 29ch;
  margin-top: 24px;
}
/* allow clicks through header overlay */
#hdr::before {
  pointer-events: none;
}

/* force hero CTA above any overlays */
#hero_cta {
  position: relative;
  z-index: 5;
}
/* Column holder */
.column_holder {
  opacity: 0;
  animation: fade-in 0.35s ease-out forwards;
  animation-delay: 0.6s;
}

/* Shared keyframes */
@keyframes fade-in {
  to {
    opacity: 1;
  }
}

    #row1 .slideone p{
      font-family: "Questa Light", Georgia, serif;
      font-size: 24px;
      line-height: 1.36;
      color: #eec877;
      padding: 12px 0;
      width: 88%;
      font-weight: 400;
    }

    .column_holder{
      width: 100%;
      font-size: 20px;
      line-height: 1.36;
      color: #eee;
      padding: 36px 0 0 0;
      display: flex;
      gap: 3%;
      flex-wrap: wrap;
    }
    .hero_col{
      	width: 15%;
      	min-width: 190px;
    	font-family: "Plus Jakarta Sans", Arial, sans-serif;
      	font-size: 15px;
      	line-height: 1.4;
      	font-weight: 400;
      	padding: 12px 0 24px 0;
      	border-top: 1px solid #333;
    }

.column_holder .hero_col span {
  	font-family: "Plus Jakarta Sans", Arial, sans-serif;
  	font-weight: 700;
  	font-size: 32px;
  	float: left;
  	width: 99%;
  	margin: 0 0 0 -6px;
	color: #CFC8B9;
  	padding: 0 6px;
}


    /* Row 2/3 grid */
    .container-37{
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 24px;
      align-items: start;
      margin-top: 48px;
    }
    .span-3{ grid-column: 1 / span 3; }
    .span-7{
      grid-column: 4 / span 7;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .span-3 h2{
      font-family: "Plus Jakarta Sans", Arial, sans-serif;
      font-size: 24px;
      line-height: 1.1;
      font-weight: 700;
      color: #222;
      padding: 0 0 4px 0;
      margin: 0;
    }
    .span-7 p{
      font-family: "Plus Jakarta Sans", Arial, sans-serif;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.36;
      color: #222;
      padding: 0 0 16px 0;
    }
    /* Missing in home_02.css */
	.span-9{
  		grid-column: 4 / span 9; /* after a span-3 spacer */
  		width: 100%;
  		min-width: 0;
	}

	/* Mobile: your breakpoint only resets span-3 + span-7 */
		@media (max-width: 900px){
  			.span-9{ grid-column: 1 / -1; } /* */
	}

    #row2{ background: #fff; color: #222; padding: 0 0 0px 0; }
    #row3{ background: #fff; color: #222; padding: 4px 0 56px 0; }
    #row4{ background: #111; min-height: 40vh; }
    #row5{ background: #fff; padding: 0px 0 0px 0; color: #222; }
    #row7{ background: #060A12; color: #eee; }
    #row8{ background: #f8f8f8; color: #222; }
    
    #espn_case { background: #fff; color: #222; margin: 0 0 36px 0; }

    #row3 ul{
      margin: 0;
      padding-left: 20px;
    }
    #row3 ul li{
      margin: 0 0 16px 0;
      font-family: "Plus Jakarta Sans", Arial, sans-serif;
      font-size: 20px;
      line-height: 1.36;
      color: #222;
    }

    .close_row{
      width: 100%;
      padding: 102px 0 124px 0;
    }
    .close_row p{
      width: 60%;
      font-family: "Plus Jakarta Sans", Arial, sans-serif;
      font-size: clamp(20px, 3.6vw, 26px);
      font-weight: 600;
      line-height: 1.36;
      color: #fff;
    }
    .close_row .last-line{ padding: 24px 0 0 0; }
    

  

.work_mod a{
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #fc9;
    text-decoration: none;
    border-bottom: 3px solid #fc9;
    padding: 0 0 3px 0;
}

.work_mod a:hover{
    color: #fc9;
    color: var(--nav-hover);
    border-bottom: 1px solid var(--nav-hover);
    transition: color var(--ui-color-ease), border-bottom-color var(--ui-color-ease);
}


.sxm_case {
	background-image: url("../img/sxm_case_bgd.webp");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--bg-dark);
	/*height: 600px; */
}

.sxm_case h2{
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -0.4px;
    color: #fff;
    padding: 0 0 24px 0;
    max-width: 500px;
}

.sxm_case p {
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3em;
	letter-spacing: 0;
	color: #fff;
	max-width: 400px;
	padding: 0 0 36px 0;
}
.case_brow {
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3em;
	letter-spacing: 1.5px;
	color: #F4BEBE;
	max-width: 400px;
}

.espn_case_brow {
	font-family: "Plus Jakarta Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3em;
	letter-spacing: 1.5px;
	color: #eee;
	max-width: 400px;
}
.brand_logo svg{
    	margin: 8% 18px 12px 0;
    	opacity: .85;
    	height: 15px;
    	color: #FCDDC6;
    	color: #eee;
    }
.espn_brand_logo svg{
    	margin: 0 0 18px 0;
    	opacity: .85;
    	height: 22px;
    	color: #E10406;
    }
    
button{
      padding: 18px 48px;
      font-family: "Plus Jakarta Sans", Arial, sans-serif;
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: .75px;
      background: #fff;
      color: #000;
      border: 0;
      border-radius: 26px;
      margin: 36px 0 24px 0;
      cursor: pointer;
      transition: background-color var(--ui-color-ease), color var(--ui-color-ease);
      max-width: 300px;
    }

#case1 a {
	text-decoration: none;
}

@media (max-width: 1024px){
    .close_row p{ width: 88%; }
}
@media (max-width: 900px){
    .container-37{
    	 grid-template-columns: 1fr;
        row-gap: 24px;
      }
      .span-3, .span-7{ grid-column: 1 / -1; }
}

@media (max-width: 768px){
/*#row1 {
	background: var(--bg-dark);
	height: 70svh;
	position: relative;
	min-height: 628px;
}*/
.sxm_case {
	background-image: url("../img/sxm_case_bgd_mobile.webp");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--bg-dark);
	height: 84svh;
}
#row4 {
	background: #111;
	min-height: 70vh;
	border_bottom: 3px solid #f00;
}
    #row1 .slideone{ top: 12vh; }
    #row1 h1{ font-size: clamp(48px, 7.6vw, 82px); }
    #row1 .slideone p{ width: 98%; line-height: 1.15; }
    .hero_col{ 
      	/*width: 98%; */
      	min-width: 29%;
      	font-size: 13px;
      	line-height: 1.36;
      	font-weight: 400;
      	padding: 8px 0 24px 0;
      	border-top: 1px solid #222;
      	border-bottom: 1px solid #222;
    }
    .column_holder .hero_col span {
  		font-family: "Plus Jakarta Sans", Arial, sans-serif;
  		font-weight: 700;
  		font-size: 24px;
  		float: left;
  		width: 99%;
		color: #fff;
  		padding: 0 6px 0px 0;
  		border-bottom: 1px solid #111;
  		margin: 0 0 12px -8px;
	}

}
@media (max-width: 450px) {
	.hero_col{ 
      	width: 29%; /* */
      	
      }
}
@media (max-width: 450px) {
	.column_holder {
		padding: 6px 0 0 0;
	}
	#hero_cta button {
		margin-top: 12px;
	}
	#row1 h1 {
		font-size: clamp(36px, 3.6vw, 48px);
		font-size: clamp(14vw, 3.6vw, 48px);
		border-bottom: 0px solid #fff;
		line-height: 1.055em;
	}
	.column_holder .hero_col span {
		font-weight: 700;
		font-size: 16px;
	}
	.hero_col{ 
    	min-width: 31%;
    }
    #row1 .slideone p {
		font-family: "Questa Light", Georgia, serif;
		font-size: 18px;
		line-height: 1em;

	}
}







/* -------------------------------------------------
   Buttons, single-source of truth
   Targets current markup:
   - <a class="btn" ...>
   - <div class="close_row"><a><button>...</button></a>
------------------------------------------------- */

:root{
  --btn-radius: 999px;
  /*
  --btn-pad-y: 18px;
  --btn-pad-x: 48px;*/
  
   --btn-pad-y: 16px;
  --btn-pad-x: 36px;

  --btn-bg: #fff;
  --btn-text: #000;
  --btn-border: rgba(0,0,0,0.12);

  --btn-hover-bg: rgba(249, 84, 87, 0.10);
  --btn-hover-bg: radial-gradient(64.22% 103.57% at 50% 50%, rgba(20, 51, 210, 0.66) 0%, rgba(32, 45, 110, 0.07) 100%);
  --btn-hover-bg:  #F95457;
  --btn-hover-bg: rgba(55, 55, 210, 0.50);
  
  --btn-hover-border: rgba(249, 84, 87, 0.45);
  --btn-hover-border: rgba(32, 58, 250, 0.82);
  --btn-hover-border: rgba(64, 64, 255, 0.12);
  
  --btn-hover-text: #F95457;
  --btn-hover-text: #fff;
}

/* Base styles for both button types */
a.btn,
.close_row a > button{
  -webkit-appearance: none;
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);

  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);

  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .75px;

  text-decoration: none;
  cursor: pointer;

  transition:
    background-color var(--ui-color-ease),
    color var(--ui-color-ease),
    border-color var(--ui-color-ease),
    box-shadow var(--ui-color-ease),
    transform 180ms ease;

  	max-width: 400px;
}
#hero_cta button{
	
  -webkit-appearance: none;
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--btn-pad-y) var(--btn-pad-x);
  padding: 16px 36px;
  border-radius: var(--btn-radius);

  background: var(--btn-bg);
  background: #eee;
  color: var(--btn-text);
  border: 1px solid var(--btn-border);

  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .65px;

  text-decoration: none;
  cursor: pointer;

  transition:
    background-color var(--ui-color-ease),
    color var(--ui-color-ease),
    border-color var(--ui-color-ease),
    box-shadow var(--ui-color-ease),
    transform 180ms ease;

  	max-width: 400px;

}
#hero_cta button:hover{
	background: var(--btn-hover-bg);
  	border-color: var(--btn-hover-border);
  	color: var(--btn-hover-text);
}


/* Hover and focus */
a.btn:hover,
.close_row a > button:hover{
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-text);
}

a.btn:focus-visible,
.close_row a > button:focus-visible{
  outline: 2px solid rgba(249, 84, 87, 0.55);
  outline-offset: 3px;
}

/* Active */
a.btn:active,
.close_row a > button:active{
  transform: translateY(1px);
}

/* CTA-only animation, scoped to contact section button */
.close_row a > button{
  position: relative;
  overflow: hidden;
  animation: cta-pulse 1.6s ease-out 1;
}

.close_row a > button::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(249, 84, 87, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 520ms ease;
}

.close_row a > button:hover::after{
  transform: translateX(120%);
}

@keyframes cta-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(249, 84, 87, 0.35); }
  100%{ box-shadow: 0 0 0 16px rgba(249, 84, 87, 0); }
}