:root { --cl-teal:   #138F8C;
--cl-yellow: #F5CC00;
--cl-font-heading: var(--font-heading);
--cl-font-paragraph: var(--font-paragraph);
} .hero-chic-block {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
} .hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-repeat: no-repeat;
background-color: var(--cl-teal);
transition: background-position .4s ease;
margin-top: 95px;
background-position: var(--hero-img-position, 80% 35%);
--hero-pos-x: clamp(55%, 8vw + 45%, 80%);
--hero-pos-y: clamp(20%, 3vw + 20%, 35%);
background-position:
var(--hero-img-position-x, var(--hero-pos-x))
var(--hero-img-position-y, var(--hero-pos-y));
} @media (max-width: 1600px) {
.hero-bg {
background-position: 74% 35%;
}
} @media (max-width: 1280px) {
.hero-bg {
background-position: 68% 35%;
}
} @media (max-width: 1024px) {
.hero-bg {
background-position: 60% 35%;
}
} @media (max-width: 768px) {
.hero-bg {
background-position: 42% 30%;
}
.hero-content {
justify-content: flex-start;
}
.hero-text {
max-width: 100%;
padding: 42px 24px 56px;
}
} @media (max-width: 520px) {
.hero-bg {
background-position: 34% 28%;
}
}
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.15) 0%,
rgba(0,0,0,.05) 35%,
rgba(0,0,0,.35) 100%
);
pointer-events: none;
} .hero-content {
position: relative;
z-index: 2;
display: flex;
justify-content: flex-end;
min-height: 85vh;
}
@media (max-width: 600px) {
.hero-content {
background: rgba(0,0,0,.2);
inset: 0;
background: linear-gradient( to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.65) 100%)
}
body h1.hero-h1{ 
text-shadow: 0 2px 16px rgba(0,0,0,.25);
color: #fff !important;
}
} .hero-text {
width: 50%; padding: 56px 52px 56px 48px;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
}
@media (max-width: 1024px) {
.hero-text {
padding: 162px 52px 56px 48px;
}
}
@media (max-width: 768px) {
.hero-text {
width: 100%;
padding: 48px 32px;
justify-content: end;
}
}
@media (max-width: 600px) {
.hero-text {
padding: 140px 20px 20px;
}
} .hero-kicker { font-family: var(--font-paragraph);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
margin: 0 0 20px;
line-height: 1.6;
}
@media (max-width: 600px) {
.hero-kicker {
line-height: 1;
}
} .hero-h1 {
font-family: var(--font-heading);
font-size: clamp(2rem, 3.5vw, 3.25rem);
font-weight: 400;
line-height: 1.15;
color: #fff;
margin: 0 0 24px;
} .hero-claim-wrap {
position: relative;
height: 2.8em;
margin-bottom: 28px;
overflow: hidden;
}
.hero-claim {
font-family: var(--font-heading);
font-size: clamp(1.25rem, 2vw, 1.75rem);
font-style: italic;
color: var(--cl-yellow);
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.55s ease, transform 0.55s ease;
pointer-events: none;
}
.hero-claim.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.hero-claim.exit {
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.55s ease, transform 0.55s ease;
} .hero-date {
font-family: var(--font-paragraph);
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.8);
margin: 0 0 36px;
letter-spacing: 0.05em;
} .hero-ctas {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}    .countdown-strip {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
background: #fff;
border-bottom: 1px solid #E0DDDA;
padding: 20px 40px;
}
@media (max-width: 768px) {
.countdown-strip {
grid-template-columns: 1fr;
padding: 20px 24px;
}
} .countdown-left {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.countdown-label {
font-family: var(--font-paragraph);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #888;
white-space: nowrap;
}
.countdown-units {
display: flex; }
.cd-unit {
display: flex;
flex-direction: column;
align-items: center; padding: 0 16px;
border-right: 1px solid #1A1A1A;
}
.cd-unit:last-child {
border-right: none;
}
@media (max-width: 600px) {
.cd-unit {
padding: 0 13px;
}
}
.cd-number {
font-family: var(--font-heading);
font-size: 26px;
font-weight: 400;
line-height: 1;
color: #1A1A1A;
}
.cd-label {
font-family: var(--font-paragraph);
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #aaa;
margin-top: 4px;
} .countdown-right {
display: flex;
align-items: center;
gap: 10px;
}
.countdown-dot {
font-size: 1.25rem;
color: var(--cl-teal);
line-height: 1;
}
.cd-location {
font-family: var(--font-paragraph);
font-size: 0.875rem;
color: #444;
white-space: nowrap;
}
.cd-location-link {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-paragraph);
font-size: 0.875rem;
color: #444;
white-space: nowrap;
color: var(--cl-mid);
text-decoration: none;
transition: color .2s;
}
.cd-location-link:hover {
color: var(--cl-teal);
}
.cd-location-link svg {
flex-shrink: 0;
color: var(--cl-teal);
}