:root {
	--background: #eee0d7;
	--fonts: #04384b;
	--accent-bright: #03607e;
	--accent: #48cae4;
	--white: white;
	--sandy: #e7c9af;
	--red: #cc0303;
}


body {
	margin: 0;
	padding: 0;
	background-color: var(--background);
	height: 100%;
	overflow-x: hidden;
	background: var(--background);
	transition: background-color 0.4s ease;
	user-select: none;
	-webkit-user-drag: none;
}

body,
canvas {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

canvas {
	display: none;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#smooth-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
}

#smooth-content {
	position: relative;
	width: 100%;
}

/* Libre Franklin */

@font-face {
	font-family: 'Libre Franklin';
	src: url('/fonts/Libre/LibreFranklin-Light.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

/* Regular */
@font-face {
	font-family: 'Libre Franklin';
	src: url('/fonts/Libre/LibreFranklin-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Medium */
@font-face {
	font-family: 'Libre Franklin';
	src: url('/fonts/Libre/LibreFranklin-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* SemiBold */
@font-face {
	font-family: 'Libre Franklin';
	src: url('/fonts/Libre/LibreFranklin-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'GT Super';
  src: url('/fonts/GT-Super/GT-Super-Display-Light-Trial.woff2') format('woff2');
  font-weight: 300; 
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Super';
  src: url('/fonts/GT-Super/GT-Super-Display-Light-Italic-Trial.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* LOADER */

.loader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--background);
	z-index: 5;
	display: flex;
}

.loader__title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 38px;
	z-index: 6;
	color: var(--background);
}

/* ===== NAVBAR LAYOUT ===== */
.navbar {
	position: fixed;
	inset: 0 0 auto 0;
	height: 80px;
	display: flex;
	align-items: center;
	padding: 0 5vw;
	z-index: 9999;
	background: transparent;
	transition: background 0.3s ease;
}

.navbar.dark-text * {
	color: var(--fonts);
	fill: var(--fonts);
	border-color: var(--fonts);
	background-color: transparent;
}

.navbar.dark-text .nav-divider {
	background-color: var(--fonts);
	border-color: var(--fonts);
}

.navbar.dark-text a:hover {
	color: var(--accent);
}

.delayed {
	opacity: 0;
	transform: translateY(-30px);
}

.navbar.scrolled {
	background-color: rgb(4, 56, 75, 0.9);
	top: 0;
}

.navbar.transparent {
	background: transparent;
}

.navbar.background-visible {
	background-color: rgb(4, 56, 75, 0.9);
}

.navbar.transparent {
	background-color: transparent;
}

.logo {
	display: flex;
	align-items: center;
	gap: 2px;
	text-decoration: none;
}

.round-logo {
	height: 55px;
}

.words-logo {
	height: 60px;
	margin-left: 0;
}

.nav-right {
	margin-left: auto;
	display: flex;
	align-items: center;
}

/* ===== LINKS (DESKTOP) ===== */
.nav-links {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.nav-links a {
	color: var(--white);
	text-decoration: none;
	font: 100 16px/1.1 "Libre Franklin", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	text-transform: none;
	transition: color .2s ease;
}

/* ===== DIVIDER  ===== */
.nav-divider {
	width: 1px;
	height: 25px;
	background-color: var(--accent);
	margin: 0 2rem;
}

/* Desktop-only:*/
@media (min-width: 1025px) {
	.nav-links a {
		transition: color .25s ease;
	}

	.nav-links:hover a {
		color: rgba(255, 255, 255, .45);
	}

	.nav-links a:hover,
	.nav-links a:focus-visible {
		color: #fff;
	}
}

@media (min-width: 768px) {
	.navbar.dark-text * {
		color: var(--fonts);
		fill: var(--fonts);
		border-color: var(--fonts);
		background-color: transparent;
	}

	.navbar.dark-text .nav-divider {
		background-color: var(--fonts);
		border-color: var(--fonts);
	}

	.navbar.dark-text a:hover {
		color: var(--fonts);
	}
}

@media (max-width: 767px) {

	.navbar.dark-text button#lang-toggle span,
	.navbar.dark-text button#lang-toggle i {
		color: var(--white);
		fill: var(--white);
	}

	.navbar.dark-text .nav-divider {
		background-color: var(--white);
		border-color: var(--white);
	}

	.navbar.dark-text ul li {
		color: var(--white);
	}

}
#lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

/* Поворот при открытии */
#lang-toggle[aria-expanded="true"] .lang-arrow {
  transform: rotate(180deg);
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher{ 
  position: relative; 
  z-index: 1200; 
}
#lang-toggle{
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 100 15px "Libre Franklin", sans-serif;
  padding: 6px 0;
}
#lang-toggle i{ 
  transition: transform .25s ease; 
}

.lang-options{
  position: absolute;
  top: calc(100% + 10px);
  right: 0; 
  min-width: 160px;
  background: rgb(4, 56, 75, 0.9) ;
  backdrop-filter: saturate(140%) blur(4px);
  list-style: none;
  padding: 8px;
  margin: 0;
  border: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, max-height .25s ease;
}
.lang-options li{
  padding: 10px 10px;
  color: var(--white);
  font: 200 14px/1 "Libre Franklin", sans-serif;
  white-space: nowrap;
  border-radius: 4px;
  cursor: pointer;
  transition: color .25s ease;
}
.lang-options:hover li{
  color: rgba(255,255,255,.45);
}

.lang-options li:hover,
.lang-options li:focus-visible{
  color: var(--white);
  outline: none;                      
}
.lang-switcher.open #lang-toggle i{ transform: rotate(180deg); }
.lang-switcher.open .lang-options{
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ===== BURGER  ===== */
.burger {
	background: none;
	border: none;
	width: 36px;
	height: 22px;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	z-index: 1101;
	cursor: pointer;
}

.burger .bar {
	height: 1px;
	background: var(--background);
	border-radius: 3px;
	transition: transform 0.4s ease, width 0.4s ease, opacity 0.4s ease;
	transform-origin: center;
}

.bar-long {
	width: 100%;
}

.bar-middle {
	width: 70%;
}

.bar-short {
	width: 40%;
}

.burger:not(.open):hover .bar-long {
	width: 40%;
}

.burger:not(.open):hover .bar-short {
	width: 100%;
}

.burger.open .bar {
	width: 100%;
}

.burger.open .bar:nth-child(1) {
	transform: rotate(45deg) translateY(15px);
}

.burger.open .bar:nth-child(2) {
	opacity: 0;
}

.burger.open .bar:nth-child(3) {
	transform: rotate(-45deg) translateY(-15px);
}

.burger.open:hover .bar:nth-child(1),
.burger.open:hover .bar:nth-child(3) {
	animation: none;
}

.burger.open:hover {
	filter: brightness(1.2);
	transition: filter 0.3s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
	.nav-links {
		display: none;
	}

	.burger {
		display: flex;
	}

	.round-logo {
		height: 54px;
	}

	.words-logo {
		height: 40px;
	}
}

/* Small tweak for very narrow phones */
@media (max-width: 420px) {
	.nav-divider {
		margin: 0 1rem;
	}

	#lang-toggle {
		font-size: 14px;
	}
}


/* ===================== */
/* FULLSCREEN MENU       */
/* ===================== */
.fullscreen-menu {
	position: fixed;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--fonts);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: top 0.5s ease;
	z-index: 1050;
	padding: 2rem;
}

.fullscreen-menu.open {
	top: 0;
}

/* ===================== */
/* MENU CONTENT LAYOUT   */
/* ===================== */
.fullscreen-menu-content {
	display: flex;
	width: 100%;
	max-width: 1200px;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: relative;
}

/* Divider */
.fullscreen-menu .divider {
	width: 1px;
	height: 70%;
	margin: 0 4rem;
	background-color: rgba(255, 255, 255, 0.4);
	opacity: 0;
	animation: fadeIn 0.8s forwards;
	animation-delay: 0.8s;
	animation-play-state: paused;
}

.fullscreen-menu.open .divider {
	animation-play-state: running;
}

/* ===================== */
/* NAV LINKS             */
/* ===================== */
.fullscreen-menu nav {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.fullscreen-menu nav a {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s forwards;
	animation-delay: calc(0.2s * var(--i));
	animation-play-state: paused;
	font-family: 'GT Super';
	color: var(--background);
	font-size: 46px;
	text-decoration: none;
	transition: color .25s ease;
	position: relative;
}

.fullscreen-menu.open nav a {
	animation-play-state: running;
	color: var(--white);
}

.fullscreen-menu nav a:hover::after {
	width: 100%;
}

.fullscreen-menu nav a {
	transition: color .25s ease;
}

.fullscreen-menu nav:hover a {
	color: rgba(255, 255, 255, .45);
}

.fullscreen-menu nav a:hover,
.fullscreen-menu nav a:focus-visible {
	color: #fff;
}

/* ===================== */
/* CONTACT INFO          */
/* ===================== */
.menu-contact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 2rem;
	color: var(--white);
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s forwards;
	animation-delay: 1s;
	animation-play-state: paused;
}

.menu-contact div {
	display: flex;
	flex-direction: column;
}

.fullscreen-menu.open .menu-contact {
	animation-play-state: running;
}

.menu-contact p {
	font-family: "Libre Franklin", sans-serif;
	font-weight: 200;
	font-size: 14px;
}

.menu-contacts {
	color: var(--accent);
	font-family: "Libre Franklin", sans-serif;
	font-weight: 200;
	text-decoration: none;
	font-size: 14px;
	transition: all 0.5s ease;
	margin-top: 5px;
	position: relative;
	display: inline-block;
	align-self: flex-start;
	width: auto;
}

.menu-contact .social-icons ul li {
	display: inline-block;
	margin: 0 16px 0 0;
}

.menu-contacts:hover {
	color: var(--white);
}

.menu-contacts::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--white);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .35s ease;
}

.menu-contacts:hover::after,
.menu-contacts:focus-visible::after {
	transform: scaleX(1);
}

@media (hover: hover) {
	.menu-contacts:hover::after {
		transform: scaleX(1);
	}
}

.fa-brands {
	font-size: 28px;
	padding: 4px;
	color: var(--white);
	transition: all 0.5s ease;
}

.fa-instagram:hover {
	background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

.fa-facebook:hover {
	color: #1877F2;
}

.fa-x-twitter {
	border-radius: 50%;
}

.fa-x-twitter:hover {
	color: black;
	background: white;
	border-radius: 50%;
}

.fa-youtube:hover {
	color: #ff0000;
}

/* ===================== */
/* ANIMATIONS            */
/* ===================== */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ===================== */
/* RESPONSIVE            */
/* ===================== */
@media (max-width: 768px) {
	.fullscreen-menu-content {
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
		padding: 2rem 1rem;
		margin-top: 90px;
	}

	.fullscreen-menu nav {
		gap: 1.6rem;
	}

	.fullscreen-menu nav a {
		font-size: 32px;
		text-align: center;
	}

	.fullscreen-menu .divider {
		width: 80%;
		height: 1px;
		margin: 2rem 0;
	}

	.menu-contact {
		align-items: center;
		text-align: center;
	}

	.menu-contacts {
		align-self: center;
	}

	.menu-contact .social-icons a {
		font-size: 1.5rem;
	}
}

.scroll-btn {
  pointer-events: none;
  transform: translateY(20px);
  
}

.scroll-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ================= HERO SECTION ================= */
.hero {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 5vw;
	box-sizing: border-box;
	background-position: center;
	background-size: cover;
}
    .scroll-btn {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
      width: 46px;
      height: 46px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      cursor: pointer;

      background: transparent;
      border: 1px solid rgba(255,255,255,0.45);
      backdrop-filter: saturate(140%) blur(4px);
      -webkit-backdrop-filter: saturate(140%) blur(4px);

      box-shadow: 0 8px 28px rgba(0,0,0,0.28);
      transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .15s ease;
      z-index: 3;
    }

/* subtle pulsing ring */
.scroll-btn::before{
  content:"";
  position:absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: none;
  opacity: 0;
  transform: scale(.7);
  animation: scrollRing 2s ease-out infinite;
}

@keyframes scrollRing{
  0%   { opacity:.45; transform: scale(.7); }
  80%  { opacity:0;   transform: scale(1.15); }
  100% { opacity:0;   transform: scale(1.15); }
}

/* icon */
.scroll-btn svg{
  width: 22px;
  height: 22px;
  stroke: var(--white);        /* matches your site palette */
  stroke-width: 2;
  fill: none;
  /* animate only the SVG (not the container) to avoid transform conflicts with GSAP */
  animation: arrowBob 1.4s ease-in-out infinite;
}

@keyframes arrowBob{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(4px); }
}

/* hover/active states */
@media (hover: hover){
  .scroll-btn:hover{
    background: rgb(72, 202, 228, 0.2);
    border-color: rgba(255,255,255,0.75);
    box-shadow: 0 10px 34px rgba(0,0,0,0.34);
    transform: translateX(-50%) translateY(-1px);
  }
}
.scroll-btn:active{
  transform: translateX(-50%) translateY(0);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .scroll-btn::before,
  .scroll-btn svg{
    animation: none !important;
  }
}

/* Видео на фоне */
.hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.5s ease, opacity 0.5s ease;
	will-change: transform, opacity;
}

/* Полупрозрачный оверлей */
.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(29, 29, 29, 0.7);
	z-index: -1;
}

/* Контейнер контента */
.hero-content {
	max-width: 600px;
	color: var(--white);
	z-index: 20;
}

/* Главный заголовок с цветным словом "Tomorrow" */
.hero-content .history-part {
	font-size: 78px;
	font-weight: 300;
	line-height: 90px;
	font-family: 'GT Super', sans-serif;
	color: var(--white);
	margin-bottom: 1rem;
	opacity: 0;
	transform: translateX(-30px);
}

.hero-content .history-part .tomorrow-part {
	font-family: 'GT Super', sans-serif;
	font-weight: 300;
	transform: skewX(-12deg);
	/* имитация курсив */

	font-style: italic;
	color: var(--accent);
}


/* Параграф */
.hero-content p {
	font-family: 'Libre Franklin', sans-serif;
	font-weight: 100;
	font-size: 17px;
	line-height: 22px;
	margin-bottom: 2rem;
	opacity: 0;
	transform: translateX(-30px);
}

.hero-content p span {
	color: var(--accent);
}

/* Контейнер кнопок */
.hero-buttons {
	display: flex;
	align-items: center;
	gap: 15px;
}

.hero-cta,
.hero-btn-text {
	opacity: 0;
	transform: translateX(-30px);
	text-decoration: none;

}

/* Кнопки */
.hero-cta-btn {
	position: relative;
	padding: 15px 45px;
	text-align: center;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid var(--accent);
	color: var(--white);
	font-family: "Libre Franklin", sans-serif;
	font-size: 15px;
	cursor: pointer;
	overflow: hidden;
	z-index: 1;
	transition: color 0.4s ease, background 0.4s ease, border 0.4s ease;
}

.hero-cta-btn:hover {
	border: 1px solid transparent;
	background-color: rgba(238, 224, 215, 0.1);
	color: var(--accent);
}

/* Горизонтальные линии кнопки */
.hero-cta-btn::before,
.hero-cta-btn::after {
	content: "";
	position: absolute;
	height: 1px;
	width: 0;
	background: var(--white);
	transition: width 0.5s ease;
	z-index: 2;
}

.hero-cta-btn::before {
	top: 0;
	left: 0;
	transform-origin: left;
}

.hero-cta-btn::after {
	bottom: 0;
	right: 0;
	transform-origin: right;
}

.hero-cta-btn:hover::before,
.hero-cta-btn:hover::after {
	width: 100%;
}

/* Вертикальные линии */
.hero-cta-btn .v-border {
	position: absolute;
	width: 1px;
	height: 0;
	background: var(--white);
	transition: height 0.5s ease;
	z-index: 2;
}

.hero-cta-btn .v-left {
	top: 0;
	left: 0;
	transform-origin: top;
}

.hero-cta-btn .v-right {
	bottom: 0;
	right: 0;
	transform-origin: bottom;
}

.hero-cta-btn:hover .v-left,
.hero-cta-btn:hover .v-right {
	height: 100%;
}

/* Текст внутри кнопок */
.hero-cta-text {
	color: var(--white);
	text-decoration: none;
	font-family: "Libre Franklin", sans-serif;
	font-size: 15px;
	position: relative;
	display: inline-block;
}

.hero-cta-text::after {
	content: "";
	display: block;
	width: 0;
	height: 1px;
	background-color: var(--accent);
	transition: width 0.3s ease;
}

.hero-cta-text:hover::after {
	width: 100%;
}

/* Стрелка рядом с текстом кнопки */
.arrow {
	margin-left: 5px;
	margin-bottom: -7px;
	animation: arrow-bob 1.5s ease-in-out infinite;
}

@keyframes arrow-bob {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(4px);
	}
}

/* ================= MEDIA QUERIES ================= */
@media (max-width: 1024px) {
	.hero-content {
		max-width: 90%;
	}

	.hero-content .history-part {
		font-size: 60px;
	}

	.hero-content .history-part .tomorrow-part {
		font-size: 60px;
	}

	.hero-content p {
		font-size: 1.1rem;
	}

	.hero-cta-btn {
		padding: 15px 25px;
		font-size: 14px;
	}
}

@media (max-width: 876px) {
	.hero-content .history-part {
		line-height: 70px;
	}

	.hero-content .history-part .tomorrow-part {
		line-height: 70px;
	}

	.hero {
		height: 90vh;
	}

	.hero-video {
		height: 90vh;
	}
}

@media (max-width: 600px) {
	.hero {
		justify-content: center;
		padding: 0 4vw;
		text-align: center;
	}

	.hero-content {
		margin-top: 100px;
	}

	.hero-content .history-part {
		font-size: 36px;
		line-height: 36px;
	}

	.hero-content .history-part .tomorrow-part {
		font-size: 40px;
		line-height: 40px;
	}

	.hero-content p {
		font-size: 16px;
		margin-top: 30px;
	}

	.hero-buttons {
		flex-direction: column;
		align-items: center;
	}

	.hero-btn-text {
		margin-top: 15px;
	}

	#scrollDownBtn {
		display: none;
	}
}




#press {
  margin-top: 50px;
  padding: 30px 12vw 50px 12vw;
  background: var(--background);
  color: var(--fonts);
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
}
#press-churchill{
    margin-top: 50px;
}
/* Grid */
.press-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.grid-churchill{
    grid-template-columns: repeat(2, 1fr); 
    gap: 50px;
}
.grid-ashes{
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px;
}
.press-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.press-item-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 2.5;
  width: 100%;
  max-width: 280px;
  max-height: 350px;
  display: block;
  text-decoration: none;
  color: inherit;
}

.press-item-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); 
  z-index: 1;
}

.press-item .press-item-text {
  font-family: 'GT Super', serif;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  color: var(--accent-bright);
  text-transform: uppercase;
  margin: 5px 0 0 0 ;
}


.press-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Overlay */
.press-item-img::after {
  content: "Read More";
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--background);
  font-family: "Libre Franklin", sans-serif;
  font-size: 18px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 5;
  transform: scale(1.05);
  transition: opacity 0.3s ease, transform 0.5s ease;
  pointer-events: none;
}

/* Hover effects */
.press-item-img:hover img {
  transform: scale(1.1);
}
.press-item-img:hover::after {
  opacity: 1;
  transform: scale(1);
}


.press-item .description-press {
  font-family: "Libre Franklin", sans-serif;
  font-size: 18px;
  font-weight: 200;
  margin-top: 10px;
  align-self: center;
}



#pdf-modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(4, 56, 75, 0.9);
  justify-content: center;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
  z-index: 9999;
}

#pdf-modal.active {
  display: flex;
}

#pdf-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(4, 56, 75, 0.9);
  z-index: -1;
}

.pdf-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  max-height: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pdf-viewer {
  /* width: 100%;
  height: 100%;
  border: none; */
  width: 100%;
  height: 80vh;
  border: none;
  object-fit: contain;
  background: white;
  overflow: hidden;
}

.modal-close.item-3 {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 40px;
  right: 40px;
  cursor: pointer;
  z-index: 10001;
  background: none;
  border: none;
  padding: 0;
}

.modal-close.item-3::before,
.modal-close.item-3::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 35px;
  background-color: var(--white);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: transform 0.3s ease-out;
}

.modal-close.item-3::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close.item-3:hover::before,
.modal-close.item-3:focus::before {
  transform: translate(-50%, -50%) rotate(135deg);
}

.modal-close.item-3:hover::after,
.modal-close.item-3:focus::after {
  transform: translate(-50%, -50%) rotate(225deg);
}

.pdf-popup-msg {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.95);
  color: #042C3E;
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10002;
  max-width: 80%;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.pdf-popup-msg.show {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .pdf-modal-content {
    max-width: 100%;
    max-height: 75%;
    padding: 0 0;
  }

  .pdf-viewer {
    width: 120%;
    height: 80vh;
    align-items: center;
  }

  .modal-close.item-3 {
    top: 20px;
    right: 10px;
    width: 25px;
    height: 25px;
  }

  .modal-close.item-3::before,
  .modal-close.item-3::after {
    width: 25px;
  }
  #press{
    padding: 20px 0;
  }
  .press-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0;
  }
.grid-ashes{
    grid-template-columns: repeat(2, 1fr);
}
  .press-item .description-press {
    font-size: 16px;
    text-align: center;
  }
    .pdf-popup-msg {
    font-size: 14px;
    padding: 10px 16px;
    bottom: 40px;
    max-width: 90%;
  }
}

/* Ultra small screens (e.g. older phones) */
@media (max-width: 480px) {
  .pdf-viewer {
    height: 85vh;
  }

  .modal-close.item-3 {
    top: 15px;
    right: 15px;
  }

  .press-item .press-item-text {
    font-size: 14px;
  }
    .pdf-popup-msg {
    font-size: 13px;
    padding: 8px 12px;
    bottom: 20px;
  }
}

/*REC*/
.page-wrapper {
	position: relative;
}

.rec2-img {
	position: absolute;
	top: -7%;
	left: 8%;
	transform: translateX(-50%) rotate(0deg);
	z-index: 1;
	width: 180px;
}

.rec-img,
.rec1-img {
	position: absolute;
	width: 180px;
	z-index: 1;
	pointer-events: none;
}

.rec-img {
	right: -3.5%;
	top: 200px;
}

.rec1-img {
	left: -2%;
	top: 150px;
}


.rec3-img {
	position: absolute;
	left: -2%;
	top: 36%;
	width: 180px;
	z-index: 26;
}

.rec6-img,
.rec7-img {
	position: absolute;
	width: 180px;
	height: auto;
	z-index: 1;
	pointer-events: none;
}

.rec6-img {
	top: 55%;
	left: -1.5%;
}

.rec7-img {
	top: 40px;
	right: -2%;
}

@media (max-width: 1440px) {

	.rec-img,
	.rec1-img,
	.rec2-img,
	.rec3-img,
	.rec6-img,
	.rec7-img {
		width: 120px;
	}

}

@media (max-width: 1024px) {

	.rec-img,
	.rec1-img,
	.rec2-img,
	.rec3-img,
	.rec6-img,
	.rec7-img {
		width: 130px;
	}

	.rec2-img {
		bottom: -7%;
	}


	.rec6-img {
		top: 55%;
		left: -8.5%;
	}

	.rec7-img {
		top: 40px;
		right: -8.5%;
	}
}

@media (max-width: 934px) {
	.rec-img {
		right: -6.5%;
		top: 120px;
	}

	.rec1-img {
		left: -5%;
		top: 150px;
	}

	.rec6-img {
		left: -10.5%;
	}

	.rec7-img {
		right: -10.5%;
	}
}

@media (max-width: 834px) {

	.rec-img,
	.rec1-img,
	.rec2-img,
	.rec3-img,
	.rec6-img,
	.rec7-img {
		display: none;
	}
}


/* * QUOTE 2 SECTION */

.quote-two {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	justify-content: center;
	padding: 80px 0;
	color: var(--fonts);

}

.quote-two h3 {
	font-size: 87px;
	text-align: center;
	line-height: 90px;
	font-family: 'GT Super';
	font-weight: 100;
}

.quote-two-bold {
	text-transform: uppercase;
	font-weight: bold;
}

.quote-two-italic {
	font-style: italic;
	color: var(--accent-bright);
}

.histor {
	left: -200px;
}

.tomw {
	left: 200px;
}

.histor,
.that,
.tomw {
	position: relative;
}

/* Tablet */
@media screen and (max-width: 1024px) {
	.quote-two {
		padding: 80px 40px;
	}

	.quote-two h3 {
		font-size: 70px;
		line-height: 75px;
	}

	.histor {
		left: -100px;
	}

	.tomw {
		left: 120px;
	}
}

@media screen and (max-width: 768px) {
	.quote-two h3 {
		font-size: 66px;
	}

}

/* Mobile */
@media screen and (max-width: 600px) {
	.quote-two {
		margin-top: -10px;
		padding: 100px 20px;
	}

	.quote-two h3 {
		font-size: 44px;
		line-height: 48px;
	}

	.histor {
		left: -60px;
	}

	.tomw {
		left: 50px;
	}
}

/* Mobile */
@media screen and (max-width: 480px) {
	.quote-two {
		margin-top: -15px;
		padding: 40px 20px;
	}
}

.letter-inner {
	display: inline-block;
	transform: translateY(100%);
	opacity: 0;
	will-change: transform, opacity;
}


/* COLLECTION SECTION */
#collections {
	display: flex;
	flex-direction: column;
}

.coll-intro {
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
	padding: 100px 0 70px 0;
	color: var(--fonts);
}

.coll-intro h3 {
	font-size: 87px;
	text-align: center;
	line-height: 90px;
}

.coll-bold {
	color: var(--accent-bright);
	text-transform: uppercase;
	font-weight: 100;
}

.coll-italic {
	font-family: 'GT Super';
	font-style: italic;
	font-weight: 100;
}

.unseen {
	position: relative;
	right: -100px;
}

.unforg {
	position: relative;
	left: -100px;
}

@media (max-width: 600px) {
	.unseen {
		right: -60px;
	}

	.unforg {
		left: -30px;
	}
}

/* Paragraph */
.coll-p {
	display: flex;
	margin-top: 60px;
	font-family: "Libre Franklin", sans-serif;
	font-size: 20px;
	font-weight: 100;
	max-width: 800px;
	text-align: center;
}

.letter-section h3 {
	visibility: hidden;
	overflow: hidden;
	line-height: 1;
}

.letter-inner {
	display: inline-block;
	transform: translateY(100%);
	will-change: transform, opacity;
}


#collections .coll-background {
	height: 100vh;
	width: 100vw;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	place-items: center;
	color: var(--background);
	text-decoration: none;
	text-align: center;
	position: relative;
	overflow: hidden;
}

#collections .coll-background .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: -1;
}

.ww2 .bg {
	background-image: url("https://media.cainarchive.com/collections/ww2.webp");
}

.churchill .bg {
	background-image: url("https://media.cainarchive.com/collections/churchill.webp");
}

@media (max-width: 768px) {
	.churchill .bg {
		background-image: url("https://media.cainarchive.com/collections/churchill-sm.webp");
	}
}

.kennedy .bg {
	background-image: url("https://media.cainarchive.com/collections/kennedy.webp");
}

.hollywood .bg {
	background-image: url("https://media.cainarchive.com/collections/hollywood.webp");
}


#collections .coll-background h3 {
	font-family: 'GT Super';
	font-size: 96px;
	font-weight: 200;
	margin-bottom: 20px;
	color: var(--accent);
}

#collections .coll-background p {
	font-size: 22px;
	font-family: "Libre Franklin", sans-serif;
	font-weight: 200;
	max-width: 600px;
	color: var(--white);
}

#collections .coll-background .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(29, 29, 29, 0.5);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* Cursor tooltip */
.cursor-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgb(157, 157, 157, 0.5);
	color: var(--background);
	font-family: "Libre Franklin", sans-serif;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.9);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 9999;
	backdrop-filter: blur(4px);
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
	.cursor-tooltip {
		display: none !important;
	}
}

/* Tablet screens (≤1024px) */
@media (max-width: 1024px) {
	.coll-intro {
		padding: 80px 20px 50px 20px;
	}

	.coll-intro h3 {
		font-size: 70px;
		line-height: 72px;
	}

	.coll-p {
		font-size: 18px;
		max-width: 90%;
	}

	#collections .coll-background h3 {
		font-size: 60px;
	}

	#collections .coll-background p {
		font-size: 18px;
		padding: 0 20px;
	}
}

/* Mobile screens (≤600px) */
@media (max-width: 600px) {
	.coll-intro {
		padding: 60px 15px 40px 15px;
	}

	.coll-intro h3 {
		font-size: 42px;
		line-height: 46px;
	}

	.coll-p {
		font-size: 16px;
		line-height: 1.5;
		margin-top: 40px;
		max-width: 100%;
	}

	#collections .coll-background {
		height: 80vh;
		/* less tall on small screens */
	}

	#collections .coll-background h3 {
		font-size: 36px;
		margin-bottom: 15px;
	}

	#collections .coll-background p {
		font-size: 16px;
		padding: 0 15px;
	}

	#collections .coll-background .overlay {
		padding: 20px;
	}
}


/* FOOTER */
.footer {
	background-color: var(--fonts);
	color: var(--white);
	padding: 60px 40px 30px;
	font-family: 'Libre Franklin', sans-serif;


	.footer-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 40px;
		max-width: 550px;
		margin: 0 auto;
	}

	.footer-heading {
		text-align: center;
		font-size: 22px;
		font-weight: 100;
		margin-bottom: 30px;
		font-family: 'GT Super';
	}


	.footer-heading span {
		font-style: italic;
		color: var(--accent);
	}

	.footer-divider {
		border: none;
		border-top: 1px solid rgba(255, 255, 255, 0.3);
		margin: 0 auto 50px;
		max-width: 1200px;
		width: 80%;
	}

	p {
		font-weight: 100;
	}

	a {
		color: var(--white);
		font-weight: 100;
		text-decoration: none;
		transition: color 0.3s;

		&:hover {
			color: var(--accent);
		}
	}


	.footer-nav {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.footer-contact {
		display: flex;
		flex-direction: column;
		gap: 3px;
		font-size: 13px;
	}

	.footer-social {
		display: flex;
		gap: 15px;
		font-size: 20px;
	}
}

.footer-bottom {
	text-align: center;
	margin-top: 40px;
	font-size: 12px;
	opacity: 0.6;
}

.footer-protected {
	margin-left: auto;
	margin-right: auto;
	max-width: 650px;
	margin-top: 6px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.footer-wrapper .footer-social {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 768px) {
	.footer-wrapper {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-divider {
		width: 60%;
		margin: 0 auto;
	}

	.footer-wrapper .logo {
		margin-bottom: 10px;
	}
}