/* =========================================================================
   Case — D&L Auto Body & Towing
   Dark industrial. Tow-truck orange + sky blue. Oswald display.
   Palette: bg #11161E · fg #F4F5F7 · orange #F08C1E · blue #4C8BF5
   ========================================================================= */

.case--dl-auto {
	background: #11161E; color: #F4F5F7;
	font-family: 'Work Sans', sans-serif;
}

.dl-eyebrow {
	font-family: 'Oswald', sans-serif; font-weight: 500;
	font-size: .82rem; letter-spacing: .22em;
	text-transform: uppercase; color: #F08C1E;
	margin: 0 0 1em; display: inline-flex; align-items: center; gap: .6em;
}
.dl-eyebrow::before {
	content: ''; width: 24px; height: 2px; background: currentColor;
}
.dl-h2 {
	font-family: 'Oswald', sans-serif; font-weight: 600;
	font-size: clamp(1.8rem, 3.8vw, 2.8rem);
	line-height: 1.05; text-transform: uppercase; letter-spacing: .005em;
	margin: 0 0 .6em;
}
.dl-prose { color: #B5BCC6; line-height: 1.6; margin: 0; }

/* ---------- Hero ---------- */
.dl-hero {
	position: relative;
	padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 9vw, 100px);
	background:
		radial-gradient(80% 60% at 50% 0%, rgba(240,140,30,.10), transparent 60%),
		#0C1118;
	overflow: hidden;
}
.dl-hero__stripe {
	position: absolute; top: 0; left: 0; right: 0; height: 8px;
	display: flex;
}
.dl-hero__stripe span {
	flex: 1;
	background: repeating-linear-gradient(
		135deg,
		#F08C1E 0 14px,
		#11161E 14px 28px
	);
}
.dl-hero__stripe span:nth-child(2n) {
	background: repeating-linear-gradient(
		135deg,
		#11161E 0 14px,
		#F08C1E 14px 28px
	);
}

.dl-hero__inner {
	position: relative;
	max-width: 900px;
}

/* License plate eyebrow */
.dl-hero__plate {
	display: inline-flex; align-items: center; gap: 0;
	background: #F4F5F7; color: #11161E;
	border-radius: 8px;
	font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
	box-shadow: 0 6px 16px -8px rgba(0,0,0,.6);
	overflow: hidden;
	margin-bottom: 32px;
}
.dl-hero__plate-state {
	background: #4C8BF5; color: #fff;
	padding: 8px 12px; font-size: 1rem; letter-spacing: .15em;
}
.dl-hero__plate-num {
	padding: 8px 18px; font-size: 1rem; letter-spacing: .2em;
}

.dl-title {
	font-family: 'Oswald', sans-serif; font-weight: 700;
	font-size: clamp(2.8rem, 8vw, 5.4rem);
	line-height: .95; text-transform: uppercase; letter-spacing: .005em;
	margin: 0 0 .5em;
}
.dl-title__amp {
	color: #F08C1E;
	font-style: italic;
	font-family: 'Fraunces', serif;
	font-weight: 400;
}
.dl-lede {
	max-width: 56ch;
	font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55;
	color: #B5BCC6; margin: 0 0 32px;
}
.dl-hero__meta {
	display: flex; flex-wrap: wrap; gap: 28px;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,.1);
}
.dl-hero__meta span {
	display: inline-flex; align-items: baseline; gap: 8px;
	font-family: 'Oswald', sans-serif; font-size: .9rem; letter-spacing: .08em;
	text-transform: uppercase; color: #8A93A0;
}
.dl-hero__meta strong {
	font-size: 1.5rem; color: #F08C1E;
}

/* ---------- Sections ---------- */
.dl-section {
	padding: clamp(70px, 10vw, 120px) 0;
	border-top: 1px solid rgba(255,255,255,.06);
}
.dl-section--dark { background: #0C1118; }
.dl-split {
	display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start;
}
@media (max-width: 880px) { .dl-split { grid-template-columns: 1fr; gap: 24px; } }
.dl-split p { color: #B5BCC6; margin: 0 0 1em; line-height: 1.6; max-width: 60ch; }
.dl-split p:last-child { margin-bottom: 0; }

/* ---------- Tiles ---------- */
.dl-tiles {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
	margin-top: 40px;
}
@media (max-width: 760px) { .dl-tiles { grid-template-columns: repeat(2, 1fr); } }
.dl-tile {
	background: #161C26;
	border: 1px solid rgba(255,255,255,.06);
	border-left: 3px solid #F08C1E;
	border-radius: 4px;
	padding: 22px;
	transition: transform .25s var(--ac-ease-out), background .25s, border-left-color .25s;
}
.dl-tile:nth-child(3n+2) { border-left-color: #4C8BF5; }
.dl-tile:nth-child(3n)   { border-left-color: #F4F5F7; }
.dl-tile:hover {
	background: #1B2330;
	transform: translateY(-2px);
	border-left-width: 6px;
}
.dl-tile__icon { font-size: 1.6rem; margin-bottom: 12px; filter: saturate(.8); }
.dl-tile__name {
	font-family: 'Oswald', sans-serif; font-weight: 600;
	font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em;
	margin-bottom: 4px;
}
.dl-tile__desc { color: #8A93A0; font-size: .9rem; line-height: 1.45; }

/* ---------- Hours table ---------- */
.dl-hours {
	width: 100%; border-collapse: collapse;
	background: #161C26;
	border-radius: 6px; overflow: hidden;
	font-family: 'Oswald', sans-serif;
}
.dl-hours th, .dl-hours td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 1rem;
	letter-spacing: .05em;
}
.dl-hours th {
	background: #11161E;
	color: #8A93A0; font-weight: 500;
	text-transform: uppercase; font-size: .78rem; letter-spacing: .14em;
}
.dl-hours tbody tr:last-child td { border-bottom: 0; }
.dl-hours tbody tr { transition: background .2s; }
.dl-hours tbody tr:hover { background: #1B2330; }
.dl-hours__on {
	color: #21C794; font-weight: 700;
	position: relative;
}
.dl-hours__on::before {
	content: ''; display: inline-block; width: 8px; height: 8px;
	border-radius: 50%; background: #21C794;
	margin-right: 8px; vertical-align: middle;
	box-shadow: 0 0 10px #21C794;
	animation: dl-pulse 2s ease-in-out infinite;
}
@keyframes dl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ---------- Strip ---------- */
.dl-strip {
	background: linear-gradient(90deg, #F08C1E 0%, #E27210 100%);
	color: #11161E;
	padding: clamp(40px, 6vw, 70px) 0;
	border-top: 1px solid rgba(255,255,255,.06);
}
.dl-strip__inner {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	text-align: center;
}
@media (max-width: 760px) { .dl-strip__inner { grid-template-columns: repeat(2, 1fr); } }
.dl-strip strong {
	display: block;
	font-family: 'Oswald', sans-serif; font-weight: 700;
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1;
}
.dl-strip span {
	display: block;
	font-family: 'Oswald', sans-serif; font-size: .78rem; letter-spacing: .15em;
	text-transform: uppercase; margin-top: 8px; opacity: .8;
}