:root{
	--blue:#2c73a8;
	--blue-dark:#245e8a;
  --ucla-blue: #2f77ab;
  --ucla-blue-dark: #1f5e8d;   
  --ucla-gold: #ffcc00;   
	--gold:#ffcd00;
	--ink:#10202f;
	--paper:#f7f6f3;
	--card:#ffffff;
	--muted:#5a6570;
	/* --shadow:0 18px 45px rgba(16,32,47,.14); */
	--radius:2px;
	--radius-sm:2px;
	--max:1200px;
}

*{
	box-sizing:border-box
}
html{
	scroll-behavior:smooth
}
body{
	margin:0;
	font-family: Helvetica, Arial, sans-serif;
	color:var(--ink);
	background:radial-gradient(circle at top left, rgba(255,205,0,.15), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f5f7fa 40%, #fff9e6 100%);
	line-height:1.5;
}
.announce {
  background: var(--ucla-blue);
  color: #fff;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 16px 7px;
  font-size: 13px;
}
img{
	max-width:100%;
	display:block
}
a{
	text-decoration:none;
	color:inherit
}
.container{
	width:min(var(--max), calc(100% - 32px));
	margin:0 auto
}

.gold-text {
    color: var(--ucla-gold);
}

.eyebrow{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
	padding:.55rem .9rem;
	border-radius:2px;
	color:var(--blue-dark);
	font-weight:800;
	letter-spacing:.03em;
	text-transform:uppercase;
	font-size:.76rem;
}

.eyebrow img {
    width: 175px;
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.55rem;
	padding:1rem 1.35rem;
	border-radius:2px;
	font-weight:800;
	border:0;
	cursor:pointer;
	transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
	white-space:nowrap;
}
.btn:hover{
	transform:translateY(-2px)
}
.btn-primary{
	background:var(--gold);
	color:#2774AE;
}
.btn-dark{
	background:var(--blue-dark);
	color:#fff
}
.section{
	padding:34px 0
}
.hero{
	position:relative;
	min-height:88vh;
	display:flex;
	align-items:stretch;
	overflow:hidden;
	background:#10324a;
}
.hero::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg, rgba(8,25,36,.72) 0%, rgba(8,25,36,.40) 46%, rgba(8,25,36,.08) 100%);
	z-index:1;
}
.hero-bg{
	position:absolute;
	inset:0;
	z-index:0;
}
.hero-bg img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	filter:saturate(1.02) contrast(1.03);
}
.topbar{
	position:absolute;
	inset:0 0 auto 0;
	z-index:3;
	padding:18px 0;
}
.topbar-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.logo-badge{
	display:inline-flex;
	align-items:center;
	gap:.65rem;
	color:#fff;
	font-weight:900;
	letter-spacing:.02em;
	font-size:1rem;
	text-transform:uppercase;
}
.logo-mark{
	width:152px;
	height:52px;
	border-radius:2px;
	display:grid;
	place-items:center;
	font-weight:1000;
}
.hero-content{
	position:relative;
	z-index:2;
	width:min(var(--max), calc(100% - 32px));
	margin:0 auto;
	padding:120px 0 64px;
	display:grid;
	align-items:end;
}
.hero-copy{
	/* max-width:730px; */
	color:#fff;
	padding:16px 0 0;
}
.hero h1{
	margin:18px 0 14px;
	font-size:clamp(3rem,7vw,5.6rem);
	line-height:.92;
	letter-spacing:-.04em;
	text-transform:lowercase;
	text-wrap:balance;
	text-shadow:0 10px 28px rgba(0,0,0,.18);
}
.hero h1 span{
	display:block
}
.hero-lead{
	margin:0 0 24px;
	max-width:58ch;
	font-size:clamp(1.55rem,1.85vw,1.25rem);
	color:rgba(255,255,255,.92);
	font-weight:600;
}
.hero-actions{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	align-items:center
}
.hero-note{
	margin-top:16px;
	font-size:.96rem;
	color:rgba(255,255,255,.82);
	max-width:62ch;
}
.ribbon{
	position:relative;
	margin-top:-42px;
	z-index:4;
}

.ribbon-bottom{
	position:relative;
	z-index:4;
}

.ribbon-inner{
	background:#FFD100;
	border-radius:2px;
	padding:40px;
	position:relative;
	overflow:hidden;
	clip-path:polygon(0 0, 100% 0, 100% 84%, 0 100%);
}

.ribbon-bottom{
	background:#FFD100;
	border-radius:2px;
	padding:40px;
	position:relative;
	overflow:hidden;
	clip-path:polygon(0 0, 106% 0, 100% 93%, 0 84%);
}

.ribbon-grid{
	display:grid;
	grid-template-columns:1.35fr .95fr;
	gap:28px;
	align-items:center;
    width: min(var(--max), calc(100% - 32px));
    margin: 0 auto;	
}
.ribbon-text h2{
	margin:0 0 14px;
	font-size:clamp(1.6rem,3vw,3rem);
	line-height:1;
	text-transform:lowercase;
	letter-spacing:-.04em;
	max-width:12ch;
}
.ribbon-text p{
	margin:0 0 18px;
	max-width:52ch;
	font-size:1.06rem;
	font-weight:100;
}

.ribbon-text b{
	font-weight:900;
}

.hero-card{
	position:relative;
	border-radius:2px;
	overflow:hidden;
	aspect-ratio:1.12 / 1;
	background:#ddd;
}
.hero-card img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center
}
.intro{
	padding:26px 0 20px;
	margin-top:18px;
}
.intro-grid{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:32px;
	align-items:start;
}
.intro h3{
	margin:0 0 18px;
	font-size:clamp(1.6rem,2.8vw,2.75rem);
	line-height:1.02;
	letter-spacing:-.04em;
	color:var(--blue-dark);
	text-transform:lowercase;
}
.intro p{
	margin:0 0 16px;
	font-size:1.06rem;
	color:#243241;
	max-width:62ch
}
.intro .highlight{
	font-weight:800
}

.gold-highlight{
	color: #FFD100;
}

span.highlight {
    font-weight: 900;
}

.portrait{
	border-radius:2px;
	overflow:hidden;
	transform:rotate(1deg);
	border:8px solid rgba(255,255,255,.8);
}
.portrait img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center
}
.programs{
	padding:24px 0 10px;
}
.programs-head{
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:20px;
	margin-bottom:18px;
}
.programs-head h3{
	margin:0;
	font-size:clamp(1.5rem,3vw,2.5rem);
	line-height:1;
	color:var(--blue-dark);
	letter-spacing:-.04em;
	text-transform:lowercase;
}
.programs-head p{
	margin:0;
	color:var(--muted);
	max-width:52ch
}
.cards{
	display:grid;
	grid-template-columns:repeat(2, minmax(0,1fr));
	gap:22px;
}
.card{
	position:relative;
	border-radius:2px;
	overflow:hidden;
	min-height:360px;
	background:#2774AE;
}
.card .bg{
	position:absolute;
	inset:0;
}
.card .bg img{
	width:100%;
	height:100%;
	object-fit:cover
}
.card::after{
	content:"";
	position:absolute;
	inset:0;
	/* background:linear-gradient(180deg, rgba(10,27,39,.12) 0%, rgba(10,27,39,.58) 100%); */
}
.card-content{
	position:relative;
	z-index:1;
	padding:26px;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	min-height:inherit;
	color:#fff;
}
.card h4{
	margin:0 0 10px;
	font-size:clamp(1.5rem,2.8vw,2.25rem);
	line-height:1;
	text-transform:lowercase;
	letter-spacing:-.04em;
}
.card p{
	margin:0;
	max-width:42ch;
	font-size:1rem;
	color:rgba(255,255,255,.9)
}
.card ul{
	margin:12px 0 0;
	padding:0;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:10px
}
.card li{
	padding:.48rem .7rem;
	border-radius:2px;
	background:rgba(255,255,255,.14);
	backdrop-filter:blur(10px);
	font-weight:700;
	font-size:.9rem;
}
.cta-band{
	margin:-145px 0 14px;
	/* padding:8px 0 0; */
}
.cta-shell{
	position:relative;
	border-radius:2px;
	overflow:hidden;
	min-height:300px;
	display:grid;
	align-items:end;
	background:linear-gradient(90deg, rgba(9,25,36,.72) 0%, rgba(9,25,36,.38) 55%, rgba(9,25,36,.15) 100%);    
}
.cta-shell img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover
}
.cta-shell::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg, rgba(9,25,36,.72) 0%, rgba(9,25,36,.38) 55%, rgba(9,25,36,.15) 100%);
}
.cta-content{
	position:relative;
	z-index:1;
	padding:28px;
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:18px;
    height: 250px;    
	flex-wrap:wrap;
    background: #2774AE;
}
.cta-content h3{
	margin:0;
	color:#fff;
	font-size:clamp(1.4rem,3vw,2.3rem);
	letter-spacing:-.04em;
	text-transform:lowercase;
	line-height:1;
}
.cta-content p{
	margin:.5rem 0 0;
	color:rgba(255,255,255,.86);
	max-width:55ch
}

.site-footer {
  background: var(--ucla-blue);
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 34px 18px 36px;
}
.footer-left {
  display: grid;
  gap: 8px;
  align-content: start;
}
.support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 20px;
  background: #fff;
  color: #333;
  font-size: 9px;
  font-weight: 700;
}
.footer-brand {
  width: 112px;
}
.footer-url {
  font-size: 10px;
  font-weight: 100;
}
.footer-right {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 8px;
  text-transform: lowercase;
  font-size: 10px;
  font-weight: 100;
}
.social-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-row a {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social-row img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.tiny{
	font-size:.92rem;
	color:rgba(255,255,255,.84)
}
@media (max-width:980px){
	.ribbon-grid,.intro-grid,.cards{
		grid-template-columns:1fr
}
	.hero{
		min-height:82vh
}
	.hero-content{
		padding-top:104px
}
	.ribbon-inner{
		clip-path:none
}
	.ribbon-bottom{
		clip-path:none
}

	.programs-head{
		flex-direction:column;
		align-items:flex-start
}

.cta-band{
	margin:0px 0 0px;
	/* padding:8px 0 0; */
}

}
@media (max-width:640px){
	.container{
		width:min(var(--max), calc(100% - 22px))
}
	.topbar-inner{
		gap:10px
}
	.logo-badge{
		font-size:.86rem
}
	.logo-mark{
		width:44px;
		height:44px;
		border-radius:0px
}
	.hero-content{
		padding-top:92px
}
	.ribbon-inner{
		padding:22px
}
	.ribbon-bottom{
		padding:22px
}
	.card-content,.cta-content{
		padding:22px
}
	.btn{
		width:100%
}
	.hero-actions{
		width:100%
}
	.hero-actions .btn{
		flex:1
}
}