.sss-section {
  padding: 50px 24px;
}

.sss-card,
.sss-case-card,
.sss-dossier-card,
.sss-story-card,
.sss-mission-card,
.sss-checklist-card,
.sss-overview-card,
.sss-warning-card,
.sss-oath-card {
  background: #0b0b0b;
  color: #f5e6c8;
  border: 1px solid #b88a35;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.sss-card h2,
.sss-case-card h2,
.sss-dossier-card h2,
.sss-story-card h2,
.sss-mission-card h2,
.sss-checklist-card h2,
.sss-overview-card h2,
.sss-warning-card h2,
.sss-oath-card h2 {
  color: #d6a84f;
  letter-spacing: 1px;
}

/* =========================
   HOMEPAGE HERO
========================= */

.sss-hero {
	position: relative;
	width: 100%;
	min-height: 780px;
	box-sizing: border-box;
	padding: 80px 7%;

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

	background-image: url("/wp-content/uploads/desktop-hero.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	color: #f5e6c8;
	text-align: center;
	border-bottom: 2px solid #b88a35;
	overflow: hidden;
}

/* Dark cinematic shading without hiding the picture */
.sss-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;

	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.05) 0%,
			rgba(0, 0, 0, 0.12) 42%,
			rgba(0, 0, 0, 0.58) 72%,
			rgba(0, 0, 0, 0.8) 100%
		),
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.02) 0%,
			rgba(0, 0, 0, 0.12) 55%,
			rgba(0, 0, 0, 0.75) 100%
		);
}

/* Keeps all text and blocks above the image overlay */
.sss-hero > * {
	position: relative;
	z-index: 1;
}

/* Limits the text area to the right side */
.sss-hero > .wp-block-group,
.sss-hero > .wp-block-group__inner-container {
	width: 100%;
	max-width: 700px;
	margin-left: auto;
	margin-right: 0;
}

/* Antique-gold poster title */
.sss-hero .sss-hero-title {
	margin: 0 auto 26px;
	max-width: 680px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(48px, 6vw, 88px);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 1px;
	text-transform: uppercase;

	background: linear-gradient(
		180deg,
		#fff1bd 0%,
		#d9b867 45%,
		#98712d 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;

	filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.85));
}

/* Decorative divider beneath title */
.sss-hero .sss-hero-title::after {
	content: "—  🗝  —";
	display: block;
	margin-top: 22px;

	color: #d4af57;
	-webkit-text-fill-color: #d4af57;
	font-size: 23px;
	font-weight: 400;
	letter-spacing: 5px;
}

/* Italic mystery tagline */
.sss-hero .sss-hero-tagline {
	margin: 0 auto 18px;
	color: #f6e8c4 !important;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(21px, 2.1vw, 30px);
	font-style: italic;
	line-height: 1.35;

	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.95);
}

/* Main description */
.sss-hero .sss-hero-text {
	max-width: 610px;
	margin: 0 auto 28px;

	color: #f8edcf !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 2px;
	text-transform: uppercase;

	text-shadow: 0 2px 9px rgba(0, 0, 0, 1);
}

/* Actual WordPress Button block */
.sss-hero .wp-block-buttons {
	justify-content: center;
	margin: 28px auto 22px;
}

.sss-hero .wp-block-button__link {
	display: inline-block;
	padding: 17px 34px;

	background: linear-gradient(
		180deg,
		#ead08b 0%,
		#bc9140 100%
	);
	color: #251707 !important;

	border: 1px solid #f0d991;
	border-radius: 4px;

	font-size: 15px;
	font-weight: 900;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none !important;

	box-shadow:
		0 5px 18px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}

.sss-hero .wp-block-button__link:hover,
.sss-hero .wp-block-button__link:focus {
	background: linear-gradient(
		180deg,
		#f5df9e 0%,
		#d2a74e 100%
	);
	color: #1b1004 !important;
	transform: translateY(-2px);

	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.65),
		0 0 18px rgba(212, 175, 55, 0.28);
}

/* Details beneath the button */
.sss-hero .sss-hero-details {
	max-width: 620px;
	margin: 20px auto 0;

	color: #e8d29b !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 1px;
	text-transform: uppercase;

	text-shadow: 0 2px 7px #000;
}

/* =========================
   MOBILE HERO
========================= */

@media (max-width: 768px) {

	.sss-hero {
		min-height: 850px;
		padding: 300px 20px 48px;

		align-items: flex-end;
		justify-content: center;

		background-image: url("/wp-content/uploads/mobile-hero.jpg");
		background-position: center top;
		text-align: center;
	}

	.sss-hero::before {
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.02) 0%,
			rgba(0, 0, 0, 0.1) 30%,
			rgba(0, 0, 0, 0.65) 58%,
			rgba(0, 0, 0, 0.94) 100%
		);
	}

	.sss-hero > .wp-block-group,
	.sss-hero > .wp-block-group__inner-container {
		max-width: 100%;
		margin: 0 auto;
	}

	.sss-hero .sss-hero-title {
		font-size: clamp(41px, 12vw, 60px);
		line-height: 0.95;
	}

	.sss-hero .sss-hero-title::after {
		font-size: 18px;
		margin-top: 18px;
	}

	.sss-hero .sss-hero-tagline {
		font-size: 21px;
	}

	.sss-hero .sss-hero-text {
		font-size: 13px;
		letter-spacing: 1.4px;
	}

	.sss-hero .wp-block-buttons,
	.sss-hero .wp-block-button,
	.sss-hero .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
	}

	.sss-hero .sss-hero-details {
		font-size: 12px;
	}
}

.sss-hero-title,
.sss-case-title {
  color: #d6a84f;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.sss-hero-text,
.sss-case-subtitle {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.1rem;
}



.sss-warning-card {
  border-color: #8b1e1e;
}

.sss-quote {
  color: #d6a84f;
  font-style: italic;
  text-align: center;
}


.sss-archive-card {
    background: linear-gradient(
        180deg,
        #1a1a1a 0%,
        #080808 100%
    );

    border: 2px solid #b8860b;

    border-radius: 12px;

    padding: 40px;

    box-shadow:
        0 0 30px rgba(212,175,55,.2);
}



.sss-case-start-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 20px;
}

.sss-confidential-header {
  text-align: center;
  border: 1px solid #b8860b;
  padding: 28px;
  margin-bottom: 30px;
  background: linear-gradient(180deg, #111, #050505);
  box-shadow: 0 0 25px rgba(184,134,11,.18);
}

.sss-confidential-header h1,
.sss-confidential-header h2,
.sss-confidential-header p {
  color: #d4af37;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.sss-dossier-card,
.sss-objective-card,
.sss-verification-card,
.sss-password-card {
  background: linear-gradient(180deg, #151515, #080808);
  color: #f5e6c8;
  border: 1px solid #b8860b;
  border-radius: 16px;
  padding: 32px;
  margin: 28px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.sss-dossier-card strong,
.sss-objective-card strong,
.sss-verification-card strong {
  color: #d4af37;
}

.sss-objective-card h2,
.sss-verification-card h2 {
  color: #d4af37;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.sss-question {
  background: #1f1414;
  border-left: 5px solid #d4af37;
  padding: 18px 22px;
  margin: 22px 0;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
}

.sss-password-card {
  text-align: center;
  border-style: dashed;
}

.sss-password-card input {
  background: #f5e6c8;
  color: #111;
  border: 2px solid #d4af37;
  border-radius: 8px;
  padding: 12px;
  font-size: 1rem;
}

.sss-password-card button,
.sss-password-card input[type="submit"] {
  background: #8b1e1e;
  color: #fff;
  border: 1px solid #d4af37;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  text-transform: uppercase;
}

/* =========================
   SSS PASSWORD TERMINAL
========================= */

.sss-password-card {
    max-width: 700px;
    margin: 40px auto;
    padding: 30px;
    background: linear-gradient(
        180deg,
        rgba(15,15,15,.98),
        rgba(0,0,0,.98)
    );
    border: 2px solid #b8860b;
    border-radius: 18px;
    box-shadow: 0 0 30px rgba(184,134,11,.25);
}

.sss-password-card .passster-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sss-password-card .passster-form h2,
.sss-password-card .passster-form h3,
.sss-password-card .passster-form p {
    display: none !important;
}

.sss-password-card input[type="password"] {
    width: 100% !important;
    box-sizing: border-box;
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #b8860b !important;
    border-radius: 10px !important;
    padding: 16px !important;
    font-size: 18px !important;
}

.sss-password-card input::placeholder {
    color: #9d8b63;
}

.sss-password-card button,
.sss-password-card input[type="submit"],
.sss-password-card .passster-submit {
    width: 100%;
    margin-top: 15px;
    padding: 16px;
    background: linear-gradient(
        180deg,
        #a71e1e,
        #6e0f0f
    ) !important;
    border: 1px solid #b8860b !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}

@media (max-width:768px){

    .sss-password-card{
        width: calc(100% - 20px);
        margin:10px auto;
        padding:20px;
    }

    .sss-password-card input[type="password"]{
        font-size:16px !important;
    }

    .sss-password-card button,
    .sss-password-card input[type="submit"],
    .sss-password-card .passster-submit{
        font-size:16px;
    }

}


.passster-form label {
    color: #111 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================
   RESPONSIVE HERO IMAGES
========================= */

/* Desktop: visible by default */
.sss-desktop-hero {
	display: block !important;
	width: 100%;
}

.sss-mobile-hero,
.sss-mobile-hero-sm {
	display: none !important;
}

/* Tablet and medium mobile: 431px to 768px */
@media screen and (min-width: 431px) and (max-width: 768px) {

	.sss-desktop-hero,
	.sss-mobile-hero-sm {
		display: none !important;
	}

	.sss-mobile-hero {
		display: block !important;
		width: 100%;
	}
}

/* Small mobile phones: 430px and below */
@media screen and (max-width: 430px) {

	.sss-desktop-hero,
	.sss-mobile-hero {
		display: none !important;
	}

	.sss-mobile-hero-sm {
		display: block !important;
		width: 100%;
	}
}

/* Keep every image responsive */
.sss-desktop-hero img,
.sss-mobile-hero img,
.sss-mobile-hero-sm img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.sss-video-hero {
	width: 100%;
	max-width: 430px;
	aspect-ratio: 9 / 16;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 8px;
}

.sss-video-hero iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}