:root{
	--bg: #f3f6fb;
	--card: #ffffff;
	--muted: #6b7280;
	--accent: DarkOliveGreen ;
	--border: #e6e9ef;
}

*{box-sizing:border-box}
body{min-height:100vh}
body{
	position:relative;
	margin:0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color:#0f172a;
	-webkit-font-smoothing:antialiased;
	/* use koala image as background with a subtle translucent overlay */
	background-color: #cfe9ff;
	background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)), url('/icons/koala.png');
	background-position: center top, center top;
	background-repeat: no-repeat, no-repeat;
	/* koala display width variable used elsewhere */
	--koala-display-width: calc(min(1100px, 95vw));
	/* set koala aspect ratio (height / width). Adjust if your image has a different ratio */
	--koala-aspect: 0.71; /* default: 0.71 (e.g. 1023/1441) */
	background-size: auto, var(--koala-display-width);
}


body{
	position:relative;
	margin:0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color:#0f172a;
	-webkit-font-smoothing:antialiased;
	/* use koala image as background with a subtle translucent overlay */
	background-color: #cfe9ff;
	background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)), url('/icons/koala.png');
	background-position: center top, center top;
	background-repeat: no-repeat, no-repeat;
	/* koala display width variable used elsewhere */
	--koala-display-width: calc(min(1100px, 95vw));
	--line-scale: calc(11 / 1441);
    --brown-line-scale: calc(105 / 1441);
	--koala-aspect: 0.71; /* default: 0.71 (e.g. 1023/1441) */
	background-size: auto, var(--koala-display-width);
}

.line{
	position:absolute;
	top: calc(var(--koala-display-width) * var(--koala-aspect));
	bottom:0;
	z-index:0;
	pointer-events:none;
	width: calc(var(--koala-display-width) * var(--line-scale));
}

.line--one{
	left: calc(50% - (var(--koala-display-width) / 2) + (0.633571825 * var(--koala-display-width)) - (var(--koala-display-width) * var(--brown-line-scale) / 2));
	background: #b18b65;
	width: calc(var(--koala-display-width) * var(--brown-line-scale));
}

.line--two{
	left: calc(50% - (var(--koala-display-width) / 2) + (0.594 * var(--koala-display-width)) - (var(--koala-display-width) * var(--line-scale) / 2));
	background: #202020;
	width: calc(var(--koala-display-width) * var(--line-scale));
}

.line--three{
	left: calc(50% - (var(--koala-display-width) / 2) + (0.67314365 * var(--koala-display-width)) - (var(--koala-display-width) * var(--line-scale) / 2));
	background: #202020;
	width: calc(var(--koala-display-width) * var(--line-scale));
}

/* Ensure main content sits above pseudo backgrounds */
.container{z-index:1}

.container{
	position:relative;
	max-width:980px;
	margin:28px auto;
	padding:18px;
	/* frosted glass card */
	background: rgba(255,255,255,0.15);
	border-radius:14px;
	border:1px solid rgba(255,255,255,0.6);
	box-shadow: 0 10px 30px rgba(16,24,40,0.08);
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
}

header{
	position:relative;
	margin-bottom:22px;
	padding:24px 20px 16px;
	overflow:hidden;
	border-radius:10px;
	background: rgba(255,255,255,0.4);
	border: 1px solid rgba(255,255,255,0.35);
}

.backdrop{
	position:absolute;
	inset:0;
	height:200%;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	mask-image: linear-gradient(
		to bottom,
		black 0% 50%,
		transparent 50% 100%
	);
}

.header-content{
	position:relative;
	z-index:1;
}

.header-content h1{font-size:24px;margin:0;color:var(--accent);letter-spacing:0.015em}


.services-table{
	width:100%;
	border-collapse:collapse;
	/* make the table itself more transparent for a stronger frosted effect */
	background: rgba(255,255,255,0.40);
	border:1px solid rgba(255,255,255,0.35);
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 6px 18px rgba(16,24,40,0.04);
	backdrop-filter: blur(8px);
}

thead th{background:transparent;padding:12px 14px;text-align:left;font-weight:600;color:var(--muted);font-size:13px}
tbody tr{border-top:1px solid var(--border)}

/* Row height */
.services-table tr.service-row{height:64px}
.services-table td{padding:10px 12px;vertical-align:middle}

/* Link and icon layout */
.service-link-main{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.service-link-main .icon{
	/* prefer CSS size; override inline styles with !important */
	width:48px !important;
	height:48px !important;
	flex:0 0 48px !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	font-size:22px;
}
.service-link-main img{width:100%;height:100%;object-fit:contain;display:block}
.service-name{font-weight:600}

/* Badges */
.external-badge{display:inline-block;padding:6px 8px;border-radius:6px;font-size:12px}
.external-badge.yes{background:#ecfeff;color:#036666}
.external-badge.no{background:#fff5f5;color:#7a1f1f;border:1px solid #fee2e2}

/* Mobile expand button */
.mobile-expand{width:44px;text-align:center}
.expand-btn{background:transparent;border:1px solid var(--border);border-radius:6px;padding:6px 8px;cursor:pointer}
.expand-btn.expanded{transform:rotate(180deg)}

/* Details row styling */
.details-cell{background:linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.18));}
.details-content{padding:8px 0}
.detail-item{display:flex;gap:8px;padding:6px 0}
.detail-label{font-weight:600;color:var(--muted);min-width:120px}
.detail-value{color:#0f172a}

/* Desktop: hide mobile-specific elements */
.mobile-expand{display:none}
.details-row{display:none}

/* Mobile view: hide desktop-only columns and show mobile controls */
@media (max-width:768px){
	.desktop-only{display:none !important}
	.mobile-expand{display:table-cell;text-align:right}
	.services-table tr.service-row{height:56px}
	.services-table{font-size:15px}
	/* Make table compact on mobile */
	thead th{display:none}
	tbody tr.service-row td{display:flex;align-items:center;gap:10px}
	tbody tr.service-row td:not(.mobile-expand){flex:1}
	/* Position the expand cell absolutely to the right of the row */
	tbody tr.service-row{position:relative}
	tbody tr.service-row td.mobile-expand{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;padding:0;width:auto}
	/* prevent content overlap with the absolute button */
	tbody tr.service-row td:not(.mobile-expand){padding-right:64px}
	.mobile-expand .expand-btn{min-width:36px}
	.details-row{display:none}
	.details-row td{padding:10px}
}

/* Small polish */
.loading{color:var(--muted);text-align:center;padding:20px}
.service-row:hover{background:rgba(255,255,255,0.12)}

/* subtle translucent header bar */
.header{
	background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
	padding:12px 18px;
	border-radius:10px 10px 6px 6px;
	margin-bottom:12px;
	border:1px solid rgba(255,255,255,0.5);
	backdrop-filter: blur(6px);
}

/* tweak details panel to match frosted look */
.details-cell{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.5))}