/**
 * TPS Directory – Main styles
 * Designed to match reference layout: dark header, gold accents, 4-column directory.
 */

/* -------------------------------------------------------------------------
   CSS Variables
   ------------------------------------------------------------------------- */
:root {
	/* Colors */
	--c-dark:         #1a0e04;
	--c-dark2:        #2b1800;
	--c-dark3:        #3d2200;
	--c-amber:        #e8930a;
	--c-amber-hover:  #d47f05;
	--c-amber-light:  #f5c842;
	--c-amber-bg:     #fff8e6;
	--c-gold-border:  #d4a520;
	--c-text:         #1a1a1a;
	--c-text-muted:   #5c5c5c;
	--c-text-light:   #888;
	--c-bg:           #f0ede8;
	--c-surface:      #ffffff;
	--c-border:       #e0ddd5;
	--c-accent:       #c8420a;
	--c-link:         #2955a3;
	--c-link-visited: #7a4099;

	/* Category header gradient (orange like reference) */
	--cat-hdr-from:   #f09a10;
	--cat-hdr-to:     #c97005;

	/* Spacing */
	--sp-xs:  4px;
	--sp-sm:  8px;
	--sp-md:  16px;
	--sp-lg:  24px;
	--sp-xl:  32px;
	--sp-2xl: 48px;

	/* Typography */
	--font:   "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

	/* Layout */
	--max-w:  1240px;
	--col-gap: 14px;

	/* Misc */
	--radius: 6px;
	--tap-h:  40px;
}

/* -------------------------------------------------------------------------
   Reset / Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--c-text);
	background: #f0ede8;
	min-height: 100vh;
}

a {
	color: var(--c-link);
	text-decoration: none;
}
a:hover { text-decoration: underline; }
a:visited { color: var(--c-link-visited); }

img { max-width: 100%; height: auto; display: block; }

/* -------------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------------- */
.tps-container {
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--sp-md);
}
@media (min-width: 768px) { .tps-container { padding: 0 var(--sp-lg); } }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Header container  (dark, full-width)
   ------------------------------------------------------------------------- */
.header_container {
	position: sticky;
	top: 0;
	z-index: 200;
	background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark2) 60%, var(--c-dark3) 100%);
	border-bottom: 3px solid var(--c-amber);
	box-shadow: 0 2px 16px rgba(0,0,0,.5);
}

/* -------------------------------------------------------------------------
   .header  (inner wrapper; two rows: topbar + main)
   ------------------------------------------------------------------------- */
.header {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--sp-md);
}
@media (min-width: 768px) { .header { padding: 0 var(--sp-lg); } }

/* ─── Top bar (bookmark + tagline) ─── */
.header__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	padding: 5px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: 12px;
}

.header .bookmark a {
	color: rgba(255,255,255,.7);
	text-decoration: none;
	font-size: 11px;
}
.header .bookmark a:hover { color: var(--c-amber-light); }

.header .mobile-text-info h1 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-amber-light);
	letter-spacing: .01em;
}
@media (min-width: 768px) {
	.header .mobile-text-info h1 { font-size: 14px; }
}

/* ─── Main header row (logo | about | stats | mascot) ─── */
.header__main {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: var(--sp-md);
	padding: var(--sp-sm) 0 var(--sp-md);
}
@media (max-width: 960px) {
	.header__main {
		grid-template-columns: auto 1fr auto;
	}
	.header-stats { display: none; }
}
@media (max-width: 600px) {
	.header__main {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

/* ─── Header stats box ─── */
.header-stats {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(212, 165, 32, .25);
	border-radius: var(--radius);
	padding: 10px 14px;
	min-width: 180px;
	max-width: 210px;
}
.header-stats__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 2px 8px;
	padding: 4px 0;
}
.header-stats__row + .header-stats__row {
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.header-stats__label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--c-amber);
	width: 100%;
}
.header-stats__value {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
}
.header-stats__date {
	font-size: 10px;
	color: rgba(255, 255, 255, .4);
	white-space: nowrap;
}

/* Logo */
.header .logo a { display: inline-block; text-decoration: none; }
.header .logo img { max-height: 110px; width: auto; }
.header .header-logo-text {
	display: inline-block;
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--c-amber-light);
	text-shadow: 0 2px 6px rgba(0,0,0,.4);
	line-height: 1.1;
	padding: var(--sp-sm);
}

/* About / preview box */
.header .about {
	background: rgba(255,255,255,.96);
	border: 2px solid var(--c-gold-border);
	border-radius: var(--radius);
	padding: var(--sp-md);
	min-height: 150px;
	box-shadow: 0 2px 12px rgba(0,0,0,.35);
	transition: border-color .2s;
}
.header .about:hover { border-color: var(--c-amber); }

.header .about .default {
	font-size: 13px;
	line-height: 1.6;
	color: var(--c-text);
}
.header .about .default b { color: var(--c-accent); }

/* Siteinfo panel (shown on link hover via JS) */
.header .about .siteinfo {
	display: none;
}
.header .about .siteinfo.is-active {
	display: flex;
	gap: var(--sp-md);
	align-items: flex-start;
}

.header .about .siteinfo .leftcolumn {
	flex: 1;
	min-width: 0;
}

.header .about .siteinfo .rightcolumn {
	flex-shrink: 0;
}
.header .about .siteinfo .rightcolumn img {
	width: 140px;
	height: 95px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--c-border);
}
.header .about .siteinfo .desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-text);
	margin-bottom: var(--sp-sm);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.header .about .siteinfo .ads,
.header .about .siteinfo .date {
	font-size: 12px;
	color: var(--c-text-muted);
	margin-top: 4px;
}
.header .about .siteinfo .ads span,
.header .about .siteinfo .date span {
	font-weight: 600;
	color: var(--c-text);
}

/* Mascot */
.header .custom_logo img {
	max-height: 130px;
	width: auto;
	object-fit: contain;
}
.header .custom_logo--placeholder {
	width: 80px;
}

/* -------------------------------------------------------------------------
   Nav bar (dark strip below header)
   ------------------------------------------------------------------------- */
.site-navigation-bar {
	display: none;
}
.site-navigation-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
}
.site-navigation-bar__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-navigation-bar__link {
	display: inline-block;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	transition: color .15s, background .15s;
}
.site-navigation-bar__link:hover {
	color: var(--c-amber-light);
	background: rgba(255,255,255,.07);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Directory: .container.custom_container_class
   ------------------------------------------------------------------------- */
.container.custom_container_class {
	max-width: var(--max-w);
	margin: 0 auto;
	padding-top: 50px !important; /* fallback; JS adjusts to actual header height */
	padding-left: var(--sp-md);
	padding-right: var(--sp-md);
	padding-bottom: var(--sp-2xl);
}
@media (min-width: 768px) {
	.container.custom_container_class {
		padding-left: var(--sp-lg);
		padding-right: var(--sp-lg);
	}
}

/* Row: 4-column grid */
.row.rectangle_width {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--col-gap);
}
@media (min-width: 560px) {
	.row.rectangle_width { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.row.rectangle_width { grid-template-columns: repeat(4, 1fr); }
}

.col-sm-3 {
	display: flex;
	flex-direction: column;
	gap: var(--col-gap);
	min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Category cards  (design inspired by references: clean white cards,
   bold header, large icon, separator, numbered list with coloured icons)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Card wrapper ─── */
.item_wrap.dashboard_blocks {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(0,0,0,.06),
		0 4px 12px rgba(0,0,0,.10),
		0 12px 28px rgba(0,0,0,.07);
	transition: box-shadow .22s ease, transform .2s ease;
}
.item_wrap.dashboard_blocks:hover {
	box-shadow:
		0 2px 4px rgba(0,0,0,.06),
		0 8px 24px rgba(0,0,0,.13),
		0 20px 40px rgba(0,0,0,.09),
		0 0 0 2px var(--c-amber);
	transform: translateY(-3px);
}

/* ─── Category header ─── */
.item_title.title_custom_css {
	background: #fff;
	padding: 14px 14px 10px;
	text-align: center;
	border-bottom: 3px solid var(--c-amber);
}
.item_title .maingrouppopover {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 800;
	color: var(--c-text);
	text-transform: uppercase;
	letter-spacing: .07em;
	cursor: default;
}

/* Icon container: base styles shared by all variants */
.item_title .title-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 10px;
	font-size: 22px;
	line-height: 1;
}

/* Default amber gradient square (no icon set) */
.item_title .title-ico--default,
.item_title .title-ico:not(.title-ico--image):not(.title-ico--emoji) {
	background: linear-gradient(135deg, var(--cat-hdr-from) 0%, var(--cat-hdr-to) 100%);
	box-shadow: 0 3px 8px rgba(200,120,0,.35);
}

/* Emoji variant: transparent bg, large glyph */
.item_title .title-ico--emoji {
	background: transparent;
	box-shadow: none;
	font-size: 28px;
	width: 44px;
	height: 44px;
}

/* Image variant: light bg + subtle shadow */
.item_title .title-ico--image {
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
	padding: 4px;
}
.item_title .title-ico img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	border-radius: 6px;
}

/* ─── Description (markfav) ─── */
.item_group .markfav {
	padding: 9px 14px 10px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--c-text-muted);
	text-align: center;
	background: #fdfcf8;
	border-bottom: 1px solid #ede9de;
	font-style: italic;
}

/* ─── Site list ─── */
.visit-tracking-list {
	margin: 0;
	padding: 4px 0;
	list-style: none;
	counter-reset: site-counter;
	max-height: 370px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ddd transparent;
}
.visit-tracking-list::-webkit-scrollbar { width: 3px; }
.visit-tracking-list::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 2px;
}

/* ─── Each site row ─── */
.individualLiMagnigying {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-bottom: 1px solid #f2ede3;
	counter-increment: site-counter;
	transition: background .13s ease, padding-left .13s ease;
	position: relative;
}
.individualLiMagnigying:last-child { border-bottom: none; }

.individualLiMagnigying:hover {
	background: #fff9ed;
	padding-left: 16px;
}

/* Number */
.individualLiMagnigying::before {
	content: counter(site-counter);
	flex-shrink: 0;
	min-width: 18px;
	font-size: 11px;
	font-weight: 700;
	color: #bbb;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Site icon — bigger, rounded, coloured bg */
.individualLiMagnigying .icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	overflow: hidden;
	background: linear-gradient(135deg, #f5f0e8 0%, #ece4cc 100%);
	border: 1px solid rgba(0,0,0,.07);
}
.individualLiMagnigying .icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.individualLiMagnigying .icon-placeholder {
	font-size: 12px;
	font-weight: 900;
	color: var(--c-amber);
	line-height: 1;
	text-transform: uppercase;
}

/* Site name link */
.individualLiMagnigying .link.bookmark-link {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: #222;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .12s;
}
.individualLiMagnigying:hover .link.bookmark-link {
	color: var(--c-accent);
}
.individualLiMagnigying .link.bookmark-link:visited {
	color: #6a4a8a;
}
.individualLiMagnigying.visited .link.bookmark-link {
	color: #8a6aaa;
	font-weight: 500;
}

/* Badge "Best One !" etc. */
.individualLiMagnigying .tag { flex-shrink: 0; }
.individualLiMagnigying .tag .site-teaser {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
	background: linear-gradient(90deg, var(--c-accent), #e85a1a);
	padding: 2px 6px;
	border-radius: 4px;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(200,66,10,.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Content section (below directory) — modern editorial style
   ═══════════════════════════════════════════════════════════════════════════ */
.tps-content {
	padding: 56px 0 72px;
	background:
		linear-gradient(180deg, #f0ede8 0%, #e8e3db 100%);
	border-top: 3px solid var(--c-amber);
}

/* Full-width inner wrapper (same max-w as directory) */
.tps-content__body {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--sp-lg);
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--c-text);
}

/* ─── Info box (how we rank) ─── */
.tps-info-box {
	display: flex;
	gap: var(--sp-lg);
	align-items: flex-start;
	background: #fff;
	border-radius: 14px;
	padding: var(--sp-xl) var(--sp-xl);
	margin-bottom: var(--sp-2xl);
	box-shadow:
		0 2px 4px rgba(0,0,0,.05),
		0 8px 24px rgba(0,0,0,.08);
	border-top: 4px solid var(--c-amber);
	position: relative;
	overflow: hidden;
}
.tps-info-box::before {
	content: '';
	position: absolute;
	inset: 0 0 0 0;
	background: linear-gradient(115deg, rgba(232,147,10,.06) 0%, transparent 55%);
	pointer-events: none;
}
.tps-info-box__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--cat-hdr-from), var(--cat-hdr-to));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 3px 10px rgba(200,120,0,.3);
}
.tps-info-box__text { flex: 1; min-width: 0; }
.tps-info-box__title {
	margin: 0 0 var(--sp-sm);
	font-size: 18px;
	font-weight: 800;
	color: var(--c-text);
	letter-spacing: -.01em;
}
.tps-info-box__content {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--c-text-muted);
}
.tps-info-box__content p { margin: 0; }

/* ─── Gutenberg / wp-content typography ─── */
.tps-content__body .wp-block-group,
.tps-content__body .wp-block-columns,
.tps-content__body > * { max-width: 100%; }

/* Headings */
.tps-content__body h2,
.tps-content__body h3,
.tps-content__body h4 {
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--c-text);
	line-height: 1.25;
}
.tps-content__body h2 {
	font-size: 1.65rem;
	margin: 2.2rem 0 .85rem;
	padding-bottom: .45rem;
	border-bottom: 3px solid var(--c-amber);
	display: inline-block;
}
.tps-content__body h2:first-child { margin-top: 0; }
.tps-content__body h3 {
	font-size: 1.2rem;
	margin: 1.8rem 0 .6rem;
	color: var(--c-accent);
}
.tps-content__body h4 {
	font-size: 1rem;
	margin: 1.4rem 0 .4rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--c-text-muted);
}

/* Paragraphs & lists */
.tps-content__body p { margin: 0 0 1.1rem; }
.tps-content__body p:last-child { margin-bottom: 0; }
.tps-content__body ul,
.tps-content__body ol {
	margin: 0 0 1.1rem;
	padding-left: 1.6rem;
}
.tps-content__body li { margin-bottom: .35rem; }
.tps-content__body ul li::marker { color: var(--c-amber); }

/* Blockquote */
.tps-content__body blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem 1rem 1.5rem;
	border-left: 4px solid var(--c-amber);
	background: var(--c-amber-bg);
	border-radius: 0 10px 10px 0;
	font-style: italic;
	color: var(--c-text-muted);
	font-size: 15px;
}
.tps-content__body blockquote p { margin: 0; }

/* Links */
.tps-content__body a {
	color: var(--c-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tps-content__body a:hover { color: var(--c-accent); }

/* Inline code & pre */
.tps-content__body code {
	background: #f5f2ec;
	border: 1px solid #e2ddd3;
	border-radius: 4px;
	padding: 1px 5px;
	font-size: .88em;
	color: var(--c-accent);
}
.tps-content__body pre {
	background: var(--c-dark);
	color: #f0ede8;
	border-radius: 10px;
	padding: 1.25rem;
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}
.tps-content__body pre code {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
}

/* ─── Tables ─── */
.tps-content__body table,
.tps-content__body .wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 2px 4px rgba(0,0,0,.05),
		0 6px 20px rgba(0,0,0,.08);
	margin-bottom: 1.75rem;
	font-size: 14px;
}

/* Header row */
.tps-content__body table thead tr,
.tps-content__body .wp-block-table table thead tr {
	background: linear-gradient(90deg, var(--c-dark2) 0%, var(--c-dark3) 100%);
}
.tps-content__body table thead th,
.tps-content__body .wp-block-table table thead th {
	padding: 13px 16px;
	text-align: left;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--c-amber-light);
	white-space: nowrap;
	border-bottom: 2px solid var(--c-amber);
}

/* Body rows */
.tps-content__body table tbody tr,
.tps-content__body .wp-block-table table tbody tr {
	background: #fff;
	transition: background .12s;
}
.tps-content__body table tbody tr:nth-child(even),
.tps-content__body .wp-block-table table tbody tr:nth-child(even) {
	background: #faf8f4;
}
.tps-content__body table tbody tr:hover,
.tps-content__body .wp-block-table table tbody tr:hover {
	background: var(--c-amber-bg);
}
.tps-content__body table tbody td,
.tps-content__body .wp-block-table table tbody td {
	padding: 11px 16px;
	border-bottom: 1px solid #ede9de;
	color: var(--c-text);
	vertical-align: middle;
}
.tps-content__body table tbody tr:last-child td,
.tps-content__body .wp-block-table table tbody tr:last-child td {
	border-bottom: none;
}

/* Footer row */
.tps-content__body table tfoot td,
.tps-content__body .wp-block-table table tfoot td {
	padding: 10px 16px;
	background: #f5f2ec;
	font-weight: 600;
	font-size: 13px;
	color: var(--c-text-muted);
	border-top: 2px solid var(--c-border);
}

/* No-thead table: first row gets amber accent */
.tps-content__body table:not(:has(thead)) tbody tr:first-child td,
.tps-content__body .wp-block-table table:not(:has(thead)) tbody tr:first-child td {
	background: linear-gradient(90deg, var(--c-dark2) 0%, var(--c-dark3) 100%);
	color: var(--c-amber-light);
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* Gutenberg wp-block-table wrapper */
.tps-content__body .wp-block-table {
	margin: 0 0 1.75rem;
	overflow-x: auto;
}
.tps-content__body .wp-block-table figcaption {
	text-align: center;
	font-size: 12.5px;
	color: var(--c-text-light);
	margin-top: .5rem;
	font-style: italic;
}

/* Responsive table scroll */
@media (max-width: 767px) {
	.tps-content__body table,
	.tps-content__body .wp-block-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* -------------------------------------------------------------------------
   Back to top
   ------------------------------------------------------------------------- */
.tps-back-to-top {
	position: fixed;
	bottom: var(--sp-lg);
	right: var(--sp-lg);
	z-index: 300;
	padding: 8px 16px;
	min-height: var(--tap-h);
	font-size: 13px;
	font-weight: 600;
	font-family: var(--font);
	color: #fff;
	background: var(--c-amber);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	transition: opacity .2s, transform .2s, background .15s;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}
.tps-back-to-top--visible,
.tps-back-to-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.tps-back-to-top:hover { background: var(--c-amber-hover); }

/* ═══════════════════════════════════════════════════════════════════════════
   About Section  (.about-section)
   Full editorial layout matching the reference site's About Us page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Outer section & container ─── */
.about-section {
	width: 100%;
	padding: 2rem 0;
}
.about-container {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--sp-lg);
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	margin: 0 0 2.25rem;
}

@media (min-width: 960px) {
	.about-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
}

.about-card {
	background: linear-gradient(168deg, #ffffff 0%, #fdfbf7 100%);
	border: 1px solid rgba(212, 165, 32, 0.18);
	border-top: 3px solid var(--c-amber);
	border-radius: 18px;
	padding: clamp(1.25rem, 2.2vw, 2rem);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.05),
		0 12px 32px rgba(0, 0, 0, 0.04);
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
	overflow: hidden;
}
.about-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
	background: radial-gradient(circle at top left, rgba(232, 147, 10, 0.07) 0%, transparent 70%);
	pointer-events: none;
}
.about-card:hover {
	transform: translateY(-3px);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.08),
		0 20px 48px rgba(0, 0, 0, 0.06),
		0 0 0 2px var(--c-amber);
}

.about-card__title {
	margin: 0 0 1.5rem;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	line-height: 1.3;
	font-weight: 800;
	color: var(--c-dark);
	letter-spacing: -.01em;
	display: flex;
	align-items: center;
	gap: .65rem;
}
.about-card__title::before {
	content: '◎';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	font-size: 18px;
	color: var(--c-amber);
	background: var(--c-amber-bg);
	border: 1.5px solid rgba(232, 147, 10, 0.25);
	border-radius: 50%;
}
.about-card:nth-child(2) .about-card__title::before {
	content: '✓';
	font-weight: 700;
}

.about-card__media {
	margin: 0 0 1.25rem;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.about-card__media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .4s ease;
}
.about-card:hover .about-card__media img {
	transform: scale(1.02);
}

.about-card__content {
	color: var(--c-text);
}

.about-card__content p {
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--c-text-muted);
	margin: 0 0 .85rem;
}
.about-card__content p:first-child {
	color: var(--c-text);
	font-size: 15px;
	font-weight: 500;
}

.about-card__content p:last-child {
	margin-bottom: 0;
}

/* ─── Section header ─── */
.about-header {
	text-align: center;
	margin-bottom: 2rem;
}
.about-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-amber);
	background: var(--c-amber-bg);
	border: 1px solid rgba(232,147,10,.25);
	border-radius: 20px;
	padding: 4px 14px;
	margin-bottom: .75rem;
}
.about-title {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 900;
	color: var(--c-text);
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0;
}
.about-title span { color: var(--c-amber); }

/* ─── Hero banner ─── */
.hero-banner {
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 2rem;
	box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.hero-banner img {
	width: 100%;
	height: auto;
	display: block;
}
.team-hero { margin-top: 2rem; }

/* ─── TPS Hero content (badge + title + subtitle) ─── */
.tps-hero {
	position: relative;
	margin-bottom: 2rem;
}

.tps-hero__media {
	position: relative;
	margin-bottom: 0;
	border: 1px solid rgba(212, 165, 32, 0.3);
}

.tps-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(26, 14, 4, 0.05) 0%, rgba(26, 14, 4, 0.5) 62%, rgba(26, 14, 4, 0.78) 100%);
	pointer-events: none;
}

.tps-hero__content {
	position: relative;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	max-width: calc(var(--max-w) - 120px);
	background: linear-gradient(145deg, rgba(43, 24, 0, 0.96), rgba(26, 14, 4, 0.95));
	border: 1px solid rgba(245, 200, 66, 0.34);
	border-radius: 14px;
	padding: 1.1rem 1.25rem 1.25rem;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .28rem .72rem;
	border-radius: 999px;
	border: 1px solid rgba(245, 200, 66, 0.45);
	background: rgba(245, 200, 66, 0.12);
	color: #f7d782;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.hero-title {
	margin: .65rem 0 .35rem;
	font-size: clamp(1.7rem, 3.5vw, 2.7rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 900;
	color: #fff;
	text-wrap: balance;
}

.hero-subtitle {
	margin: 0;
	max-width: none;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(1rem, 1.2vw, 1.08rem);
	line-height: 1.7;
	letter-spacing: 0.01em;
	text-wrap: pretty;
}

.hero-subtitle p {
	margin: 0 0 .55rem;
}

.hero-subtitle p:last-child {
	margin-bottom: 0;
}

@media (max-width: 980px) {
	.tps-hero__content {
		max-width: calc(100% - 36px);
	}
}

@media (max-width: 640px) {
	.tps-hero__content {
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding: 1rem 1rem 1.1rem;
	}

	.hero-subtitle {
		max-width: 100%;
		font-size: 0.98rem;
		line-height: 1.65;
	}
}

/* ─── Intro paragraph ─── */
.about-intro {
	font-size: 16px;
	line-height: 1.8;
	color: var(--c-text);
	max-width: 860px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

/* ─── Stats grid ─── */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 2.5rem;
}
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem 1rem;
	text-align: center;
	box-shadow: 0 2px 10px rgba(0,0,0,.07);
	border-top: 3px solid var(--c-amber);
}
.stat-number {
	font-size: 1.9rem;
	font-weight: 900;
	color: var(--c-dark);
	letter-spacing: -.02em;
	line-height: 1;
}
.stat-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--c-text-muted);
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-top: .35rem;
}

/* ─── Live database stats ─── */
.live-stats-section {
	background: var(--c-dark);
	border-radius: 14px;
	padding: 1.5rem;
	margin-bottom: 2.5rem;
	box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.live-stats-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}
.live-stats-header h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}
.live-indicator {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #4ade80;
}
.live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: .5; transform: scale(.75); }
}
.live-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;
}
@media (min-width: 640px) { .live-stats-grid { grid-template-columns: repeat(4, 1fr); } }

.live-stat-item {
	background: rgba(255,255,255,.06);
	border-radius: 10px;
	padding: 1rem;
	text-align: center;
	border: 1px solid rgba(255,255,255,.08);
}
.live-stat-item.highlight {
	background: rgba(232,147,10,.15);
	border-color: rgba(232,147,10,.35);
}
.live-stat-value {
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--c-amber-light);
	line-height: 1;
	margin-bottom: .3rem;
}
.live-stat-label {
	font-size: 11px;
	font-weight: 600;
	color: rgba(255,255,255,.55);
	text-transform: uppercase;
	letter-spacing: .07em;
}

/* ─── What's New ─── */
.whats-new-section {
	background: #fff;
	border-radius: 14px;
	padding: 1.5rem;
	margin-bottom: 2.5rem;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.whats-new-header {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
}
.whats-new-header h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
	color: var(--c-text);
}
.whats-new-badge {
	background: var(--c-amber);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
	letter-spacing: .05em;
}
.whats-new-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 640px) { .whats-new-grid { grid-template-columns: repeat(2, 1fr); } }

.whats-new-column h4 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--c-text-muted);
	margin: 0 0 .75rem;
}
.whats-new-list { display: flex; flex-direction: column; gap: .5rem; }
.whats-new-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem .75rem;
	background: #faf8f4;
	border-radius: 8px;
	border: 1px solid var(--c-border);
}
.whats-new-item .icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-amber-bg);
	border-radius: 6px;
}
.whats-new-item .icon svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: var(--c-amber);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.whats-new-item-content { flex: 1; min-width: 0; }
.whats-new-item-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.whats-new-item-meta {
	display: block;
	font-size: 11px;
	color: var(--c-text-muted);
	margin-top: 1px;
}
.whats-new-item-count {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--c-amber);
	background: var(--c-amber-bg);
	padding: 2px 7px;
	border-radius: 12px;
}

/* ─── Caption / content image ─── */
.content-image {
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 1.25rem 0 .5rem;
	box-shadow: 0 3px 14px rgba(0,0,0,.1);
}
.image-caption {
	font-size: 12.5px;
	color: var(--c-text-light);
	font-style: italic;
	text-align: center;
	margin: 0 0 1.5rem;
}

/* ─── Two-column content grid ─── */
.content-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 2.5rem;
}
@media (min-width: 860px) { .content-grid { grid-template-columns: repeat(2, 1fr); } }

.content-block {
	background: #fff;
	border-radius: 14px;
	padding: 1.75rem;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.content-block h3 {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--c-dark);
	margin: 0 0 1rem;
}
.content-block h3 .icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-amber-bg);
	border-radius: 8px;
}
.content-block h3 .icon svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--c-amber);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.content-block p {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--c-text-muted);
	margin: 0 0 .85rem;
}
.content-block p:last-child { margin-bottom: 0; }

/* ─── Review process ─── */
.review-process {
	margin-bottom: 2.5rem;
}
.review-process .section-header {
	text-align: center;
	margin-bottom: 1.75rem;
}
.review-process .section-header h3 {
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	font-weight: 900;
	color: var(--c-dark);
	margin: 0 0 .4rem;
}
.review-process .section-header p {
	font-size: 14px;
	color: var(--c-text-muted);
	margin: 0;
}

.process-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px)  { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(3, 1fr); } }

.process-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 2px 10px rgba(0,0,0,.07);
	border-top: 3px solid transparent;
	transition: border-color .2s, transform .2s, box-shadow .2s;
	position: relative;
}
.process-card:hover {
	border-top-color: var(--c-amber);
	transform: translateY(-3px);
	box-shadow: 0 6px 22px rgba(0,0,0,.11);
}
.process-number {
	font-size: 2.5rem;
	font-weight: 900;
	color: var(--c-amber);
	opacity: .25;
	line-height: 1;
	margin-bottom: .5rem;
	font-variant-numeric: tabular-nums;
}
.process-summary {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--c-amber);
	margin-bottom: .6rem;
}
.process-card h4 {
	font-size: 1rem;
	font-weight: 800;
	color: var(--c-dark);
	margin: 0 0 .65rem;
}
.process-card p {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--c-text-muted);
	margin: 0 0 .6rem;
}
.process-card p:last-child { margin-bottom: 0; }

/* ─── Reject (peeled & tossed) section ─── */
.reject-section {
	background: var(--c-dark);
	border-radius: 14px;
	padding: 1.75rem;
	margin-bottom: 2.5rem;
}
.reject-section h3 {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--c-amber-light);
	margin: 0 0 1.25rem;
	text-align: center;
}
.reject-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem;
}
@media (min-width: 600px) { .reject-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .reject-grid { grid-template-columns: repeat(3, 1fr); } }

.reject-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: 13.5px;
	color: rgba(255,255,255,.8);
	padding: .6rem .85rem;
	background: rgba(255,255,255,.05);
	border-radius: 8px;
	border-left: 3px solid var(--c-accent);
}
.reject-item::before {
	content: '✕';
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 900;
	color: var(--c-accent);
}

/* ─── Divider ─── */
.divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-border), transparent);
	margin: 2rem 0;
}

/* ─── Commitment section ─── */
.commitment-section {
	background: #fff;
	border-radius: 14px;
	padding: 1.75rem;
	margin-bottom: 2.5rem;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.commitment-title {
	font-size: 1.35rem;
	font-weight: 900;
	color: var(--c-dark);
	margin: 0 0 1rem;
	text-align: center;
}
.commitment-section p {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--c-text-muted);
	margin: 0 0 .85rem;
}
.commitment-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--c-border);
}
.commitment-badge {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--c-text-muted);
	background: #faf8f4;
	border: 1px solid var(--c-border);
	border-radius: 20px;
	padding: .45rem 1rem;
}
.commitment-badge svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: var(--c-amber);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ─── FAQ ─── */
.faq-wrap {
	margin-bottom: 2.4rem;
}
.faq-head {
	margin-bottom: 1.2rem;
}
.faq-kicker {
	display: inline-flex;
	align-items: center;
	padding: .34rem .86rem;
	margin-bottom: .55rem;
	border-radius: 999px;
	background: #f5efe3;
	border: 1px solid rgba(212, 165, 32, .34);
	color: #9a6a0c;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .17em;
}
.faq-main-title {
	font-size: clamp(1.45rem, 3.3vw, 2.2rem);
	font-weight: 900;
	line-height: 1.14;
	color: var(--c-dark);
	margin: 0;
	letter-spacing: -.02em;
}
.faq-head-sub {
	max-width: 76ch;
	font-size: 15px;
	line-height: 1.72;
	color: #675f53;
	margin: .5rem 0 0;
}
.faq-head-sub p {
	margin: .45rem 0 0;
}
.faq-head-sub p:first-child {
	margin-top: 0;
}
.faq-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .85rem;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: .72rem;
}
.faq-item {
	background: #fff;
	border: 1px solid #e7e1d6;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
	border-color: rgba(212, 165, 32, .55);
	box-shadow: 0 7px 18px rgba(26, 14, 4, .09);
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .9rem;
	padding: .95rem 1.05rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
	background: linear-gradient(180deg, #fff 0%, #fcfaf7 100%);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-q {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: 1.04rem;
	font-weight: 700;
	line-height: 1.35;
	color: #29231b;
	flex: 1;
}
.faq-dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-amber);
	box-shadow: 0 0 0 4px rgba(232, 147, 10, .14);
}
.faq-chevron {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #f7f2e8;
	transition: transform .2s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-a {
	padding: .35rem 1.05rem 1.05rem 2.05rem;
	font-size: 14.5px;
	line-height: 1.75;
	color: #5a5448;
	border-top: 1px solid #f0ebe1;
	background: #fff;
}
.faq-a p {
	margin: 0;
}
.faq-a p + p {
	margin-top: .8rem;
}
.faq-a a {
	color: var(--c-amber);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.faq-q {
		font-size: .95rem;
	}
	.faq-a {
		padding: .3rem .9rem .95rem 1.65rem;
		font-size: 14px;
	}
}

/* ─── Override tps-content body headings inside about-section ─── */
.tps-content__body .about-section h2.about-card__title {
	display: flex;
	align-items: center;
	gap: .65rem;
	border: none;
	padding: 0;
	margin: 0 0 1.25rem;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 800;
	color: var(--c-dark);
	letter-spacing: -.01em;
	text-transform: none;
}
.tps-content__body .about-section h3,
.tps-content__body .about-section h4 {
	border: none;
	padding: 0;
	display: block;
	font-size: inherit;
	margin: 0;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* ─── Responsive tweaks ─── */
@media (max-width: 600px) {
	.about-container { padding: 0 var(--sp-md); }
	.content-block { padding: 1.25rem; }
	.process-card  { padding: 1.25rem; }
	.reject-section,
	.commitment-section,
	.whats-new-section { padding: 1.25rem; }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
	background: var(--c-dark);
	border-top: 3px solid var(--c-amber);
	padding: 2rem var(--sp-lg) 1.5rem;
	text-align: center;
}
.site-footer__inner {
	max-width: var(--max-w);
	margin: 0 auto;
}
.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .4rem .6rem;
	margin-bottom: 1rem;
}
.site-footer__nav a {
	color: rgba(255, 255, 255, .7);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s;
}
.site-footer__nav a:hover {
	color: var(--c-amber-light);
	text-decoration: none;
}
.site-footer__nav a:visited {
	color: rgba(255, 255, 255, .7);
}
.site-footer__sep {
	color: rgba(255, 255, 255, .25);
	font-size: 14px;
	user-select: none;
}
.site-footer__copy {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, .35);
	letter-spacing: .02em;
}

/* -------------------------------------------------------------------------
   Scrollbar (Firefox) on .visit-tracking-list already above
   Misc responsive tweaks
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.header .about { font-size: 12px; }
}
@media (max-width: 600px) {
	.header__main {
		padding-bottom: var(--sp-sm);
	}
	.header .logo img { max-height: 80px; }
	.header .custom_logo img { max-height: 90px; }
	.header .about { min-height: auto; }
}