/* Home page styles. Lifted from sabino-redeisgn/Home.html. */

/* ---------- HERO ---------- */
.hero {
	padding: 90px 0 80px;
	position: relative;
	overflow: hidden;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 80px;
	align-items: end;
}
@media (max-width: 900px) {
	.hero-grid { grid-template-columns: 1fr; gap: 56px; }
}
.hero-eyebrow {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 28px;
}
.hero-eyebrow .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--terracotta);
	box-shadow: 0 0 0 4px rgba(177, 74, 42, 0.15);
}
h1.hero-title {
	font-family: 'Newsreader', serif;
	font-weight: 400;
	font-size: clamp(48px, 6.6vw, 92px);
	line-height: 0.98;
	letter-spacing: -0.025em;
	color: var(--ink);
	text-wrap: balance;
}
h1.hero-title em {
	font-style: italic;
	color: var(--terracotta);
	font-weight: 400;
}
.hero-sub {
	margin-top: 28px;
	font-size: 19px;
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 520px;
	text-wrap: pretty;
}
.hero-actions {
	margin-top: 36px;
	display: flex; gap: 14px; align-items: center;
	flex-wrap: wrap;
}

/* Hero card — Tucson postcard */
.hero-card {
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: 24px;
	position: relative;
	box-shadow: 0 1px 0 rgba(31, 26, 20, 0.04);
}
.hero-card::before {
	content: '';
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(177, 74, 42, 0.18);
	border-radius: 2px;
	pointer-events: none;
}
.hero-card-inner { position: relative; z-index: 1; }
.postcard-art {
	aspect-ratio: 4 / 3;
	border-radius: 2px;
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
}
.postcard-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postcard-svg { background: linear-gradient(180deg, #E8C9A2 0%, #D8A77A 35%, #B86A3E 70%, #7A3A22 100%); }
.postcard-svg .sun {
	position: absolute;
	width: 70px; height: 70px;
	border-radius: 50%;
	background: #F2D9A8;
	top: 22%; right: 18%;
	box-shadow: 0 0 0 6px rgba(242, 217, 168, 0.25);
}
.postcard-svg .ridge {
	position: absolute;
	bottom: 28%;
	left: 0; right: 0;
	height: 32%;
	background: #6E3520;
	clip-path: polygon(0 100%, 0 60%, 12% 35%, 22% 55%, 35% 25%, 50% 50%, 62% 30%, 78% 55%, 88% 38%, 100% 60%, 100% 100%);
}
.postcard-svg .ridge-2 {
	position: absolute;
	bottom: 22%;
	left: 0; right: 0;
	height: 22%;
	background: #4F2515;
	clip-path: polygon(0 100%, 0 70%, 18% 40%, 32% 60%, 48% 35%, 65% 55%, 82% 38%, 100% 65%, 100% 100%);
	opacity: 0.85;
}
.postcard-svg .ground {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 28%;
	background: linear-gradient(180deg, #8E4221 0%, #5C2A14 100%);
}
.saguaro-svg {
	position: absolute;
	bottom: 18%;
}
.saguaro-1 { left: 18%; height: 42%; }
.saguaro-2 { left: 64%; height: 32%; }
.saguaro-3 { left: 78%; height: 26%; opacity: 0.85; }

.postcard-meta {
	display: flex; justify-content: space-between; align-items: baseline;
	padding-top: 4px;
}
.postcard-meta .stamp {
	font-family: 'Newsreader', serif;
	font-style: italic;
	font-size: 22px;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.postcard-meta .coords {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--ink-3);
	text-align: right;
}

/* Hero meta strip */
.hero-meta {
	margin-top: 64px;
	padding-top: 28px;
	border-top: 1px solid var(--rule);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
@media (max-width: 720px) {
	.hero-meta { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.hero-meta .item .label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 8px;
}
.hero-meta .item .value {
	font-family: 'Newsreader', serif;
	font-size: 18px;
	color: var(--ink);
}

/* ---------- WORK ---------- */
.home-work .work-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px 48px;
}
@media (max-width: 720px) {
	.home-work .work-grid { grid-template-columns: 1fr; gap: 56px; }
}
.work-item { display: block; cursor: pointer; }
.work-thumb {
	aspect-ratio: 4 / 3;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	margin-bottom: 18px;
	border: 1px solid var(--rule);
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
	background: var(--paper-2);
}
.work-item:hover .work-thumb {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -20px rgba(31, 26, 20, 0.25);
}
.work-thumb .browser { position: absolute; inset: 0; display: flex; flex-direction: column; }
.work-thumb .browser-bar {
	height: 28px;
	background: var(--paper-3);
	border-bottom: 1px solid var(--rule);
	display: flex; align-items: center;
	padding: 0 12px;
	gap: 6px;
	flex-shrink: 0;
}
.work-thumb .browser-bar .dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--ink-4);
	opacity: 0.4;
}
.work-thumb .browser-bar .url {
	flex: 1;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--ink-3);
	letter-spacing: 0.04em;
}
.work-thumb .browser-content {
	flex: 1;
	overflow: hidden;
	position: relative;
	background: var(--paper-2);
}
.work-thumb .browser-content img,
.work-thumb .browser-content .placeholder {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: top center;
	border: 0;
	border-radius: 0;
}
.work-thumb .browser-content .placeholder { background: linear-gradient(135deg, var(--paper-2), var(--paper-3)); }

.work-meta {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px;
}
.work-meta h3 {
	font-family: 'Newsreader', serif;
	font-weight: 500;
	font-size: 22px;
	letter-spacing: -0.01em;
}
.work-meta .work-link {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--ink-3);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.work-tagline {
	color: var(--ink-3);
	font-size: 15px;
	margin-top: 6px;
	line-height: 1.5;
}
.work-tags {
	margin-top: 14px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.work-tags span {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding: 4px 10px;
	border: 1px solid var(--rule);
	border-radius: 999px;
}

/* ---------- WHAT WE DO ---------- */
.services {
	background: var(--paper-2);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.service-list {
	display: grid;
	grid-template-columns: 1fr;
}
.service-row {
	display: grid;
	grid-template-columns: 80px 1fr 1.4fr 100px;
	gap: 32px;
	padding: 32px 0;
	border-top: 1px solid var(--rule);
	align-items: baseline;
	cursor: pointer;
	transition: padding .25s ease;
	color: inherit;
}
.service-row:last-child { border-bottom: 1px solid var(--rule); }
.service-row:hover { padding-left: 12px; }
@media (max-width: 720px) {
	.service-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
	.service-row:hover { padding-left: 0; }
}
.service-row .num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--ink-3);
	letter-spacing: 0.1em;
}
.service-row h3 {
	font-family: 'Newsreader', serif;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.service-row p {
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.55;
	max-width: 480px;
}
.service-row .stack {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-align: right;
}
@media (max-width: 720px) { .service-row .stack { text-align: left; } }

/* ---------- HOW WE WORK ---------- */
.home-how .how-intro {
	max-width: 760px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--ink-2);
	margin-bottom: 24px;
}
.how-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 24px;
}
@media (max-width: 900px) {
	.how-grid { grid-template-columns: 1fr; gap: 56px; }
}
.how-step {
	position: relative;
	padding-top: 28px;
	border-top: 2px solid var(--ink);
}
.how-step .step-num {
	position: absolute;
	top: -2px;
	left: 0;
	background: var(--paper);
	padding-right: 12px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--terracotta);
	letter-spacing: 0.14em;
	transform: translateY(-50%);
}
.how-step h3 {
	font-family: 'Newsreader', serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin-bottom: 14px;
}
.how-step p {
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.6;
}
.how-step .visual {
	margin-top: 24px;
	aspect-ratio: 4 / 3;
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}
.how-step .visual img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- ABOUT MINI ---------- */
.home-about .about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}
@media (max-width: 900px) {
	.home-about .about-grid { grid-template-columns: 1fr; gap: 48px; }
}
.about-prose {
	font-family: 'Newsreader', serif;
	font-size: 22px;
	line-height: 1.5;
	color: var(--ink);
	max-width: 540px;
	text-wrap: pretty;
}
.about-prose p + p { margin-top: 1em; }
.about-prose em {
	font-style: italic;
	color: var(--terracotta);
}
.about-side .label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 18px;
}
.prev-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}
.prev-row > div {
	background: var(--paper);
	aspect-ratio: 2.4 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Newsreader', serif;
	font-style: italic;
	font-size: 17px;
	color: var(--ink-2);
	letter-spacing: -0.01em;
	transition: background .15s ease, color .15s ease;
}
.prev-row > div:hover {
	background: var(--paper-2);
	color: var(--terracotta);
}
.since {
	margin-top: 28px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: var(--ink-3);
}
.since .line { flex: 1; height: 1px; background: var(--rule); }