:root{
	--bg: #f6f7f9;
	            --header-fade: 44px; /* fixed-height fade at bottom of header */
            --ink: #0f172a;
            --muted: #475569;
            --panel: #ffffff;
            --border: #d6dbe3;
            --shadow: rgba(2, 6, 23, 0.08);
            --darkband: #0b1220;
            --darktext: #e5e7eb;
            --brand-gold: #E6C28B;
            --brand-magenta: #C24BA7;
            --brand-teal: #19C6C3;
            
            /* Re-map accents to business-card palette */
            --accent: var(--brand-gold);
            --accent2: #B78F55;
            
            /* Header glow helpers */
            --header-glow-magenta: rgba(194,75,167,0.22);
            --header-glow-teal: rgba(25,198,195,0.18);
            --primary: var(--brand-gold);
            --primary-ink: #0b1220;

        }
		
		/*html {
			scrollbar-gutter: stable;
		}*/
		
		/* Prevent tiny horizontal overflow on mobile (e.g., T-bar pseudo-elements) */
		html, body{
		  overflow-x: clip;
		}

		/* Fallback for browsers that don't support 'clip' */
		@supports not (overflow: clip){
		  html, body{ overflow-x: hidden; }
		}

        * { box-sizing: border-box; }

        body{
            margin: 0;
            font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.45;
        }

        a { color: inherit; }
		
		
        header{
		position: relative;
    /* Dark band + subtle blueprint grid + restrained neon glows (from business card palette) */
    background:
        radial-gradient(900px 420px at 15% 18%, var(--header-glow-magenta), rgba(0,0,0,0) 60%),
        radial-gradient(820px 380px at 85% 22%, var(--header-glow-teal), rgba(0,0,0,0) 62%),
	        /* keep fade zone fixed in px so it doesn't grow on taller mobile headers */
	        linear-gradient(
	          180deg,
	          var(--darkband),
	          #0b1220 calc(100% - var(--header-fade)),
	          rgba(11,18,32,0.0) 100%
	        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 42px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 42px
        );
			color: var(--darktext);
			padding: 33px 18px 34px 18px;
		}

        .wrap{
            max-width: 1050px;
            margin: 0 auto;
        }

        .brand{
		  display: flex;
		  align-items: center;
		  gap: 40px;
		  justify-content: flex-start; /* not space-between */
		}

		/* left block */
		.brand-text{
		  flex: 1 1 auto;
		  min-width: 0;
		  display: flex;
		  flex-direction: column;
		  gap: 0px; /* keep your current choice */
		}

		/* right block pinned to the right */
		.brand-graphic{
		  margin-left: auto;  /* <� key: pushes it to the far right */
		  flex: 0 0 auto;     /* no shrinking weirdness */
		  transform: translateY(-14px);  /* move up; tune this number */
		}
		
		.brand-home{
		  color: inherit;
		  text-decoration: none;
		  display: inline-block;
		}

		.brand-home:hover{
		  opacity: 0.95;
		}

		.header-graphic{
		  max-height: 150px;
		  width: auto;
		}


        h1{
			font-size: 56px; /* adjust here */
			margin: 0;
			letter-spacing: 0.5px;
			font-weight: 750;
		}

		
		/* Extended "T" top bar (scales with font-size via em vars) */
.tmark{
  position: relative;
  display: inline-block;
  line-height: 1;  

  /* default (desktop / 56px) tuning */  
  --tbar-h:   0.12em;     /* thickness */
  --tbar-left: 0.80em;    /* left extension length */
  --tbar-right: 2.05em;   /* right extension length */
  --tbar-y: -12.7px;   /* + moves down, - moves up */
}

.tmark::after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateY(var(--tbar-y));
  height: var(--tbar-h);
  background: var(--primary);
  border-radius: 999px;
  opacity: 1;
  pointer-events: none;
}

/* Single continuous bar */
.tmark::after{
  left: calc(50% - var(--tbar-left));
  width: calc(var(--tbar-left) + var(--tbar-right));
}

		.tagline{
            font-size: 16px;
            color: rgba(229,231,235,0.88);
            display: flex;
			flex-direction: column;
			gap: 0px;      /* subtle separation */
		}
		
		.tagline > *{
			position: relative;
			padding-left: 12px;
		}

		.tagline > *::before{
			content: "●";
			position: absolute;
			left: 0;
			top: 1.2em;
			transform: translateY(-50%);
			font-size: 0.55em;
			color: var(--primary);
			opacity: 0.85;
		}
		
		.tagline-placeholder{
			visibility: hidden;    /* takes space but doesn't show */
		}
		
		.tagline-placeholder::before{
			content: none !important;
		}

        .subline{
			padding-top: 14px;	
			font-size: 14px;
			color: rgba(229,231,235,0.70);
			margin: 0;
		}


        
        /* Footnotes live inside white panels too; override header-style subline color there */
        .panel .subline{
            color: var(--muted);
        }
main{
            padding: 28px 18px 70px 18px;
        }

        .intro{
            max-width: 900px;
            margin: 0 auto 26px auto;
            color: var(--muted);
            font-size: 16px;
        }

        .gateway{
            max-width: 1050px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
        }

        .panel{
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 26px 26px 22px 26px;
            box-shadow: 0 10px 26px var(--shadow);
            transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
        }

        .panel:hover{
            transform: translateY(-3px);
            border-color: rgba(230,194,139,0.70);
            box-shadow: 0 14px 32px rgba(2, 6, 23, 0.12);
        }

        .panel h2{
            margin: 0 0 10px 0;
            font-size: 22px;
            letter-spacing: 0.2px;
        }        
        
		.panel p{
            margin: 0 0 18px 0;
            color: var(--muted);
        }

        .panel ul{
            margin: 0 0 18px 18px;
            padding: 0;
            color: var(--muted);
        }

        .panel li{
            margin: 6px 0;
        }

        .btnrow{
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
        }

        .btn{
            display: inline-block;
            padding: 11px 14px;
            border-radius: 12px;
            text-decoration: none;
            border: 1px solid rgba(183,143,85,0.75);
            color: #6B4C24;
            font-weight: 700;
            letter-spacing: 0.3px;
            transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
        }

        .btn:hover{
            background: rgba(47,111,173,0.10);
            border-color: rgba(47,111,173,0.95);
            color: #6B4C24;
        }

        .btn.primary{
			background: var(--accent); /* brand gold */
			color: #0b1220;
			border-color: rgba(230,194,139,1);
		}

        .btn.primary:hover{
            background: var(--accent2);
            border-color: #6B4C24;
        }

        footer{
            background: #0b1220;
            color: rgba(229,231,235,0.86);
            padding: 26px 18px;
        }

        .footergrid{
            max-width: 1050px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            font-size: 13px;
        }

        .footline{
            display: flex;
            flex-wrap: wrap;
            gap: 10px 16px;
            align-items: center;
        }

        .footline a{
            color: rgba(229,231,235,0.92);
            text-decoration: none;
            border-bottom: 1px solid rgba(229,231,235,0.25);
        }

        .footline a:hover{
            border-bottom-color: rgba(25,198,195,0.75);
        }

        @media (max-width: 880px){
	h1{	font-size: 48px; }
  
  .gateway{ grid-template-columns: 1fr; }

  .brand{
    flex-direction: column;
    align-items: stretch;     /* let children use full width */
    gap: 0px;               /* tighter, controlled spacing */
  }

  .brand-text{
    width: 100%;
  }

  /* Put the graphic in the stack but keep it visually "pinned" to the right */
  .brand-graphic{
    position: static;
    transform: none;
    margin-left: 10px;
    margin-top: 0;
    align-self: flex-start;     /* right edge on its own line */
  }  
  
  .brand-break{
    display: block;    
  }

  .header-graphic{
    max-height: 120px;
    max-width: min(360px, 100%);
    height: auto;
    width: auto;
  }

  /* tune the bar so it tracks at 48px */
  .tmark{    
    --tbar-h:   0.13em;
    --tbar-left: 0.84em;
    --tbar-right: 2.00em;
	--tbar-y: -15.0px;   /* + moves down, - moves up */
  }
}


/* v2.7 Gold Header & Footer (business-card alignment) */
header h1{
  color: var(--primary);
  white-space: nowrap;     /* prevents MileTone / Audio splitting */
}

header .tagline{
  color: rgba(230,194,139,0.90); /* slightly softer than H1 */
}

footer{
  color: var(--primary);
}

footer .footline a{
  color: var(--primary);
  border-bottom-color: rgba(230,194,139,0.35);
}

footer .footline a:hover{
  border-bottom-color: rgba(25,198,195,0.75);
}

/* ====== Site Navigation ====== */
.site-nav{
  margin-top: 0px;                 /* vertical spacing from brand block */
  padding-top: 8px;                /* spacing above divider line */
  border-top: 1px solid rgba(230,194,139,0.25);  /* faint divider line */
}

.site-nav ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 0;
  margin: 0;
}

.site-nav a{
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(229,231,235,0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-nav a:hover{
  color: var(--primary);
}

/* Active nav highlighting */
.site-nav a.active{
  /*font-weight: 500;*/	
  text-decoration: underline;
  text-underline-offset: 6px;
  color: var(--primary);
}

/* ====== Tier Control ====== */

/* Hide nav on gateway page */
.tier-gateway .site-nav{
  display: none;
}

/* Show nav on landing + subpages */
.tier-landing .site-nav,
.tier-subpage .site-nav{
  display: block;
}

@media (max-width: 420px){
  header h1{
    white-space: normal;
  }
}