/* Cliffe v3: homepage (design: homepage.html). Loaded on the front page only. */

#content.c-home { padding: 0; }

.c-section { padding: var(--section-y) 0; }
.c-display {
	margin: 0 0 24px;
	font-size: clamp(40px, 5vw, 60px);
	line-height: 1;
	letter-spacing: -0.02em;
}
.c-display a { color: inherit; text-decoration: none; }
.c-display a:hover { color: var(--c-magenta); }

/* ---------- Hero ---------- */
.c-hero--home .c-hero__inner { gap: 40px; padding-top: 72px; padding-bottom: 88px; }
.c-hero--home .c-hero__text { flex: 1 1 480px; }
.c-hero__mark {
	position: absolute; left: -140px; bottom: -170px; width: 640px; height: auto;
	opacity: .08; pointer-events: none;
}
.c-hero__lead {
	margin: 0 0 32px;
	font-family: var(--f-serif);
	font-weight: 800;
	font-size: clamp(40px, 5.2vw, 64px);
	line-height: .98;
	letter-spacing: -0.03em;
}
.c-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; }
.c-pill { padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--pill); line-height: 1.4; }
.c-hero__kicker {
	margin: 0 0 0 6px;
	font-family: var(--f-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-pink-on-mag);
}

/* Fanned photos */
.c-fan { position: relative; height: 520px; flex: 1 1 560px; min-width: 0; }
.c-fan__p1 { left: 0; top: 40px; transform: rotate(-8deg); }
.c-fan__p2 { left: 22%; top: 170px; transform: rotate(3deg); z-index: 2; }
.c-fan__p3 { left: 44%; top: 20px; transform: rotate(9deg); z-index: 1; }
.c-fan:hover .c-fan__p1 { transform: rotate(-12deg) translate(-36px, -10px); }
.c-fan:hover .c-fan__p2 { transform: rotate(0) translateY(20px) scale(1.04); }
.c-fan:hover .c-fan__p3 { transform: rotate(13deg) translate(36px, -10px); }
@media (max-width: 720px) {
	.c-fan { height: 340px; }
	.c-fan .c-photo { width: 240px; height: 180px; }
	.c-fan__p2 { top: 120px; }
}

/* ---------- Service words band (static) ---------- */
.c-marquee { padding: 22px 0; }
.c-marquee__track {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0;
	font-family: var(--f-serif); font-style: italic; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3;
	color: var(--c-white);
}
.c-marquee__item { padding: 0 16px; white-space: nowrap; }
.c-marquee__item:not(:last-child)::after { content: "\2022"; color: #FF5AAE; font-style: normal; margin-left: 16px; }
@media (max-width: 720px) {
	.c-marquee__item { padding: 0 10px; }
	.c-marquee__item:not(:last-child)::after { margin-left: 10px; }
}

/* ---------- Welcome ---------- */
.c-split { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.c-welcome__media {
	flex: 1 1 520px; min-width: 0; height: 560px;
	border-radius: var(--radius); overflow: hidden; position: relative;
}
.c-welcome__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-welcome__text { flex: 1 1 520px; min-width: 0; }
.c-welcome h2 em { color: var(--c-magenta); font-weight: 400; }
.c-welcome__intro1, .c-welcome__intro2 { margin: 0 0 18px; font-size: 18px; line-height: 1.7; }
.c-welcome__intro2 { margin-bottom: 36px; color: var(--c-grey); }
@media (max-width: 720px) { .c-welcome__media { height: 340px; } .c-split { gap: 40px; } }

.c-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.c-quick__link {
	display: flex; flex-direction: column; gap: 12px; padding: 22px;
	border-radius: var(--radius-m); text-decoration: none;
	font-weight: 600; font-size: 15px; line-height: 1.3;
}
.c-quick__link--mag, .c-quick__link--mag:hover { background: var(--c-magenta); color: var(--c-white); }
.c-quick__link--ink, .c-quick__link--ink:hover { background: var(--c-ink); color: var(--c-white); }
.c-quick__link--ink svg { color: var(--c-pink-on-dark); }
.c-quick__link--pink, .c-quick__link--pink:hover { background: var(--c-pink); color: var(--c-ink); }
.c-quick__link--pink svg { color: var(--c-magenta); }
@media (max-width: 480px) { .c-quick { grid-template-columns: 1fr; } .c-quick__link { flex-direction: row; align-items: center; } }

/* ---------- Services ---------- */
.c-services { background: var(--c-pink-soft); }
.c-services__title { margin-bottom: 48px; }
.c-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.c-svc {
	display: flex; flex-direction: column; border-radius: var(--radius-l); overflow: hidden;
	text-decoration: none;
}
.c-svc:hover { text-decoration: none; }
.c-svc__media { height: 230px; overflow: hidden; }
.c-svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-svc__body { padding: 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.c-svc__title { margin: 0; font-size: 30px; line-height: 1.1; }
.c-svc__text { margin: 0; font-size: 15px; flex: 1; }
.c-svc__more { font-weight: 600; font-size: 15px; }
.c-svc:hover .c-svc__more, .c-svc:focus-visible .c-svc__more { text-decoration: underline; }
.c-svc--mag, .c-svc--mag:hover { background: var(--c-magenta); color: var(--c-white); }
.c-svc--mag .c-svc__text { color: var(--c-pink-on-mag); }
.c-svc--ink, .c-svc--ink:hover { background: var(--c-ink); color: var(--c-white); }
.c-svc--ink .c-svc__text { color: var(--c-on-dark); }
.c-svc--ink .c-svc__more { color: var(--c-pink-on-dark); }
.c-svc--white, .c-svc--white:hover { background: var(--c-white); color: var(--c-ink); }
.c-svc--white .c-svc__text { color: var(--c-grey); }
.c-svc--white .c-svc__more { color: var(--c-magenta); }
.c-svc--grey, .c-svc--grey:hover { background: var(--c-grey); color: var(--c-white); }
.c-svc--grey .c-svc__text { color: #EDEDED; }

/* ---------- Testimonial ---------- */
.c-quote { position: relative; overflow: hidden; }
.c-quote__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.c-quote__inner {
	position: relative; max-width: 1000px; margin: 0 auto;
	padding: 128px var(--gutter); text-align: center; color: var(--c-white);
}
.c-quote__mark { margin: 0; font-family: var(--f-serif); font-size: 140px; line-height: .6; color: var(--c-pink-on-dark); }
.c-quote__text {
	margin: 20px 0 28px; font-family: var(--f-serif); font-style: italic; font-weight: 400;
	font-size: clamp(28px, 3.4vw, 42px); line-height: 1.22;
}
.c-quote__author {
	margin: 0 0 24px; font-family: var(--f-sans); font-size: 14px; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-pink-on-mag);
}
.c-quote__link { font-weight: 600; }
@media (max-width: 720px) { .c-quote__inner { padding-top: 88px; padding-bottom: 88px; } }

/* ---------- Blog ---------- */
.c-blog { background: var(--c-paper); padding-top: 110px; padding-bottom: 110px; }
.c-blog__head { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: end; margin-bottom: 40px; }
.c-blog__head .c-display { margin: 0; }
.c-blog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.c-card { display: block; border-radius: var(--radius-l); overflow: hidden; background: var(--c-white); text-decoration: none; color: var(--c-ink); }
.c-card:hover { color: var(--c-ink); text-decoration: none; }
.c-card:hover .c-card__title { color: var(--c-magenta); }
.c-card__media { height: 210px; overflow: hidden; background: var(--c-white); }
.c-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--c-magenta); }
.c-card__placeholder img { width: 96px; height: 96px; object-fit: contain; opacity: .9; }
.c-card__body { padding: 24px; }
.c-card__date { margin: 0 0 6px; font-size: 13px; color: var(--c-grey); }
.c-card__title { margin: 0; font-size: 24px; line-height: 1.2; transition: color .25s; }

/* Light hero */
.c-light .c-hero__mark { opacity: .06; }
.c-light .c-pill { border-color: rgba(185, 0, 106, .35); color: var(--c-ink); }
.c-light .c-hero__kicker { color: var(--c-magenta); }

/* Big-H1 hero variant (Magazine Printing Company): small "pre" line, H1 as the headline */
.c-hero__pre { margin: 0 0 6px; font-family: var(--f-serif); font-weight: 400; font-style: italic; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: var(--c-magenta); }
.c-hero--big-h1 h1.c-hero__lead { font-size: clamp(48px, 6.4vw, 84px); margin-bottom: 32px; color: var(--c-ink); }

/* Live-quote button (Magazine Printing Company homepage) */
.c-livequote {
	display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 20px 24px; max-width: 520px;
	border-radius: var(--radius-l); background: var(--c-magenta); color: var(--c-white); text-decoration: none;
}
.c-livequote:hover { color: var(--c-white); text-decoration: none; background: var(--c-magenta-dark); }
.c-livequote__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #7CFFB2; box-shadow: 0 0 0 6px rgba(124, 255, 178, .25); }
.c-livequote__stack { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.c-livequote__main { font-weight: 600; font-size: 18px; }
.c-livequote__sub { font-size: 14px; color: var(--c-pink-on-mag); }
.c-livequote__arrow { font-size: 22px; transition: transform .3s; }
.c-livequote:hover .c-livequote__arrow { transform: translateX(4px); }

/* SEO copy section */
.c-seo { padding: var(--section-y) 0; }
.c-seo__inner { max-width: 900px; font-size: 18px; line-height: 1.75; }
.c-seo__inner h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; margin: 48px 0 20px; color: var(--c-ink); }
.c-seo__lead p { font-size: 20px; }
.c-seo__inner a { text-decoration: underline; text-underline-offset: .18em; }
.c-seo__more summary { list-style: none; cursor: pointer; display: inline-flex; margin-top: 24px; padding: 12px 24px; border-radius: var(--pill); background: var(--c-magenta); color: var(--c-white); font-weight: 600; }
.c-seo__more summary::-webkit-details-marker { display: none; }
.c-seo__more .c-seo__close, .c-seo__more[open] .c-seo__open { display: none; }
.c-seo__more[open] .c-seo__close { display: inline; }

/* Services: title link + separate "Find out more" link (both kept from cliffev2) */
.c-svc__titlelink { color: inherit !important; text-decoration: none !important; }
.c-svc__more { text-decoration: none; }
.c-svc--mag .c-svc__more, .c-svc--grey .c-svc__more { color: var(--c-white); }