/* =========================================================================
   AWS case study — "Cloud-Native Technology for Modern Card Programs"
   Built from Figma "Additional Case studies" (Ilz2…, 100:16426).
   Static/bespoke; images live in assets/img/aws/. Prefix: aws-
   ========================================================================= */

:root {
	--aws-teal: #2ad9c4;
	--aws-ink: #111;
	--aws-ink-70: rgba(17, 17, 17, 0.7);
	--aws-darkteal: #1d403c;
	--aws-dark: #0e0e0e;
}

@media (min-width: 1024px) {
	.aws main > section > .hv-shell {
		padding-inline: 160px;
	}
}
.aws {
	overflow-x: clip;
}

/* ---- shared ------------------------------------------------------------ */
.aws-eyebrow {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: rgba(42, 217, 196, 0.2);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--aws-darkteal);
	white-space: nowrap;
}
.aws-eyebrow__dot {
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 1px;
	background: rgba(29, 64, 60, 0.2);
}
.aws-eyebrow__dot--tl { top: 0; left: 0; }
.aws-eyebrow__dot--tr { top: 0; right: 0; }
.aws-eyebrow__dot--br { bottom: 0; right: 0; }
.aws-eyebrow__dot--bl { bottom: 0; left: 0; }

.aws-sechead {
	margin: 0;
	font-weight: 500;
	font-size: 36px;
	line-height: 1.35;
	letter-spacing: -0.72px;
	text-transform: capitalize;
	color: var(--aws-ink);
}
.aws-sectext {
	margin: 0;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	color: var(--aws-ink-70);
}
.aws-sec {
	background: #f6f6f6;
	padding-block: 100px;
}
.aws-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

/* ============================== HERO ==================================== */
.aws-hero {
	background: var(--aws-dark);
	color: #fff;
}
.aws-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 713px) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	padding-block: clamp(56px, 6vw, 100px);
}
.aws-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
}
.aws-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.aws-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background: var(--aws-teal);
}
.aws-hero__title {
	margin: 0;
	font-weight: 500;
	font-size: 56px;
	line-height: 1.25;
	letter-spacing: -1.12px;
	color: #fff;
}
.aws-hero__sub {
	margin: 0;
	max-width: 620px;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.45;
	letter-spacing: -0.44px;
	color: rgba(255, 255, 255, 0.7);
}
.aws-hero__visual {
	min-width: 0;
}
.aws-hero__visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* ========================= BUSINESS CONTEXT ============================ */
.aws-context .hv-shell {
	display: flex;
	flex-direction: column;
	gap: 56px;
}
.aws-context__sub {
	max-width: min(1002px, 100%);
}
.aws-context__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.aws-ncard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 201px;
	padding: 24px;
	background: #fff;
	border: 1px dashed rgba(29, 64, 60, 0.25);
}
.aws-ncard__n {
	font-weight: 500;
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.8px;
	color: var(--aws-darkteal);
}
.aws-ncard__label {
	margin: 0;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.35;
	letter-spacing: -0.44px;
	color: var(--aws-ink);
}
.aws-ncard__dot {
	position: absolute;
	width: 10.6px;
	height: 10.6px;
	border-radius: 1px;
	background: var(--aws-teal);
}
.aws-ncard__dot--tl { top: -1px; left: -1px; }
.aws-ncard__dot--tr { top: -1px; right: -1px; }
.aws-ncard__dot--br { bottom: -1px; right: -1px; }
.aws-ncard__dot--bl { bottom: -1px; left: -1px; }

/* =========================== THE SOLUTION ============================== */
.aws-solution .hv-shell {
	display: flex;
	flex-direction: column;
	gap: 56px;
}
.aws-solution__sub {
	max-width: min(1002px, 100%);
}
.aws-tiles {
	display: flex;
	gap: 36px;
	flex-wrap: wrap;
}
.aws-tile {
	position: relative;
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 210px;
	padding: 32px 20px;
	background: #fff;
	border: 1px solid rgba(29, 64, 60, 0.1);
}
.aws-tile__icon {
	display: grid;
	place-items: center;
	width: 75px;
	height: 75px;
	background: #fff;
	border: 1px solid rgba(161, 161, 161, 0.2);
}
.aws-tile__icon img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}
.aws-tile__label {
	margin: 0;
	text-align: center;
	font-weight: 500;
	font-size: 19px;
	line-height: 1.4;
	letter-spacing: -0.38px;
	color: var(--aws-ink);
}
.aws-tile__dot {
	position: absolute;
	width: 10.6px;
	height: 10.6px;
	border-radius: 1px;
	background: var(--aws-teal);
}
.aws-tile__dot--tl { top: -1px; left: -1px; }
.aws-tile__dot--tr { top: -1px; right: -1px; }
.aws-tile__dot--br { bottom: -1px; right: -1px; }
.aws-tile__dot--bl { bottom: -1px; left: -1px; }

/* ======================= ENGINEERED FOR SCALE ========================== */
.aws-scale .hv-shell {
	display: flex;
	flex-direction: column;
	gap: 64px;
}
.aws-scale__head .aws-sechead {
	max-width: min(1300px, 100%);
}
.aws-feats {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: center;
}
.aws-feat {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	padding: 12px;
	text-align: center;
}
/* No box-shadow here. These icons are exported from Figma with the white ring
   and its soft drop shadow already painted in, on an opaque #f6f6f6 square. A
   CSS shadow on top rendered a second, larger halo that sat detached below the
   icon and was cut off square at the left and right edges, where the opaque
   PNG ends. */
.aws-feat__icon {
	width: 89px;
	height: 89px;
}
.aws-feat__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.aws-feat__label {
	margin: 0;
	max-width: 260px;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -0.4px;
	color: var(--aws-ink);
}

/* ============================ RECOGNITION ============================== */
.aws-reco__text {
	margin: 0;
	max-width: min(1200px, 100%);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.5;
	letter-spacing: -0.56px;
	color: var(--aws-ink);
}
.aws-reco__link {
	color: #3b5bdb;
	text-decoration: none;
}
.aws-reco__link:hover {
	text-decoration: underline;
}

/* ============================ RESPONSIVE =============================== */
@media (max-width: 1024px) {
	.aws-sec { padding-block: 72px; }
	.aws-hero__inner { grid-template-columns: 1fr; gap: 40px; }
	.aws-hero__title { font-size: 40px; letter-spacing: -0.8px; }
	.aws-hero__sub { font-size: 20px; }
	.aws-context__grid { grid-template-columns: repeat(2, 1fr); }
	.aws-reco__text { font-size: 24px; }
}
@media (max-width: 600px) {
	.aws-sec { padding-block: 56px; }
	.aws-sechead { font-size: 28px; letter-spacing: -0.56px; }
	.aws-hero__title { font-size: 32px; letter-spacing: -0.64px; }
	.aws-hero__sub { font-size: 18px; }
	.aws-context__grid { grid-template-columns: 1fr; }
	.aws-tile { flex-basis: 140px; }
	.aws-feat { flex-basis: 45%; }
	.aws-reco__text { font-size: 20px; }
}