/* ==========================================================================
   Kadou — design tokens
   Carrying forward the existing brand direction: warm near-black, Playfair
   Display serif for headings/italic accents, DM Sans for body/UI, a soft
   terracotta accent. Nothing reinvented here — just given a clean, fast base.
   ========================================================================== */

:root {
	--color-bg: #1D1813;
	--color-bg-alt: #251F19;
	--color-bg-light: #FBF8F3;
	--color-text: #F3EEE4;
	--color-text-muted: #C9BFAF;
	--color-text-dark: #2B2620;
	--color-accent: #DCA179;
	--color-accent-deep: #C4835A;
	--color-line: rgba(243, 238, 228, 0.14);
	--color-line-dark: rgba(43, 38, 32, 0.12);

	--font-display: 'Playfair Display', Georgia, serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--container: 1180px;
	--radius: 2px;
	--transition: 220ms ease;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 300;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; margin: 0 0 0.5em; }
em { font-style: italic; color: var(--color-accent); font-family: var(--font-display); }
p { margin: 0 0 1em; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; z-index: 9999;
	background: var(--color-accent); color: var(--color-text-dark);
	padding: .75rem 1.25rem; width: auto; height: auto; clip: auto;
}
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.section { max-width: var(--container); margin: 0 auto; padding: 5rem 1.5rem; }
.eyebrow {
	display: flex; align-items: center; gap: .6rem;
	font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--color-accent); margin-bottom: 1rem; font-weight: 500;
}
.eyebrow--center { justify-content: center; }
.eyebrow .rule { width: 28px; height: 1px; background: var(--color-accent); display: inline-block; }
.empty-note { color: var(--color-text-muted); font-style: italic; padding: 2rem 0; }

/* Buttons */
.btn {
	display: inline-block; padding: .95rem 1.9rem; font-size: .82rem;
	letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
	border-radius: var(--radius); transition: all var(--transition); border: 1px solid transparent;
	cursor: pointer;
}
.btn--filled { background: var(--color-accent); color: var(--color-text-dark); }
.btn--filled:hover { background: var(--color-accent-deep); }
.btn--outline { border-color: var(--color-accent); color: var(--color-accent); background: transparent; }
.btn--outline:hover { background: var(--color-accent); color: var(--color-text-dark); }
.btn--text { border-bottom: 1px solid currentColor; padding: 0 0 .2rem; text-transform: none; letter-spacing: 0; font-size: .95rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: transparent; backdrop-filter: none;
	border-bottom: 1px solid transparent;
	transition: background var(--transition), backdrop-filter var(--transition), border-color var(--transition), padding var(--transition);
}
.site-header.is-scrolled {
	background: rgba(29, 24, 19, 0.94); backdrop-filter: blur(14px);
	border-bottom-color: var(--color-line);
}
.site-header__inner {
	max-width: var(--container); margin: 0 auto; padding: 1.4rem 1.5rem;
	display: flex; align-items: center; gap: 2rem;
	transition: padding var(--transition);
}
.site-header.is-scrolled .site-header__inner { padding: 1rem 1.5rem; }
/* On non-hero pages (no dark image behind it) the header needs a solid
   background from the start, since there's nothing dark behind it to blend into. */
body:not(.has-image-hero) .site-header { background: rgba(29, 24, 19, 0.96); border-bottom-color: var(--color-line); }

/* On the homepage hero, the header needs to actually float ON TOP of the
   photo, not just sit transparently above it in normal flow (which would
   only reveal the page's own dark background, not the image underneath).
   position:fixed removes it from flow entirely, so the hero naturally
   starts at the very top of the viewport with the header overlapping it. */
body.has-image-hero .site-header { position: fixed; left: 0; right: 0; top: 0; }
.site-logo {
	font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .1em;
	margin-right: auto;
}
.site-logo .dot { color: var(--color-accent); }
.site-nav__list { display: flex; gap: 2.4rem; }
.site-nav__list a {
	font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
	color: var(--color-text-muted); transition: color var(--transition);
}
.site-nav__list a:hover, .site-nav__list a:focus { color: var(--color-text); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--color-text); margin: 5px 0; }

@media (max-width: 860px) {
	.site-header__cta { display: none; }
	.nav-toggle { display: block; }
	.site-nav { position: fixed; inset: 0 0 0 30%; background: var(--color-bg); transform: translateX(100%); transition: transform var(--transition); padding: 6rem 2rem; }
	.site-nav.is-open { transform: translateX(0); }
	.site-nav__list { flex-direction: column; gap: 1.5rem; }
}

/* ==========================================================================
   Hero — single large image (per redesign brief: no tile grid)
   ========================================================================== */
.hero {
	position: relative; min-height: 92vh; display: flex; align-items: flex-end;
	background-size: cover; background-position: center; background-color: var(--color-bg-alt);
}
.hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(20,16,12,0.88) 0%, rgba(20,16,12,0.35) 55%, rgba(20,16,12,0.15) 100%);
}
.hero__content { position: relative; z-index: 1; max-width: 760px; padding: 4rem 1.5rem 5rem; margin: 0 auto 0 1.5rem; }
@media (min-width: 860px) { .hero__content { margin-left: max(1.5rem, calc((100vw - var(--container)) / 2)); } }
.eyebrow--light { color: var(--color-accent); }
.hero h1 { font-size: clamp(2.8rem, 6.5vw, 5.4rem); line-height: 1.02; letter-spacing: -.01em; color: var(--color-text); margin-bottom: .8rem; animation: kadou-fade-up 800ms 200ms both; }
.hero .eyebrow--light { animation: kadou-fade-up 800ms 60ms both; }
.hero__lede { animation: kadou-fade-up 800ms 340ms both; }
.hero__actions { animation: kadou-fade-up 800ms 460ms both; }

@keyframes kadou-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Generic scroll-reveal utility — applied via JS to section headers/grids */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.hero h1, .hero .eyebrow--light, .hero__lede, .hero__actions { animation: none; }
	.reveal { opacity: 1; transform: none; transition: none; }
}
.hero__lede { max-width: 540px; color: var(--color-text-muted); font-size: 1.05rem; }
.hero__actions { display: flex; gap: 1.5rem; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; }
.hero__missing-note { position: absolute; bottom: 1rem; right: 1rem; background: #000; color: #ffb; font-size: .75rem; padding: .5rem 1rem; z-index: 2; }

/* ==========================================================================
   About teaser / full
   ========================================================================== */
.about-teaser__grid, .about-full__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; align-items: start; }
.about-full__grid { grid-template-columns: 1.5fr 1fr; }
.about-teaser__image img, .about-full__portrait img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; display: block; }
.about-full__portrait-col { position: sticky; top: 6rem; }
.about-full__portrait { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius); }
.about-full__portrait span {
	position: absolute; bottom: 0; left: 0; right: 0; background: rgba(20,16,12,.75);
	font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: .6rem 1rem; color: var(--color-accent);
}
h2 em, h1 em { color: var(--color-accent); }
.about-teaser__copy h2, .about-full__copy h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
.stat-row { display: flex; gap: 2.5rem; margin: 2rem 0; }
.stat-row strong { display: block; font-family: var(--font-display); font-size: 1.8rem; color: var(--color-accent); }
.stat-row span { font-size: .8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.about-full__stat-row { max-width: var(--container); margin: 3.5rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.stat-block { border: 1px solid var(--color-line); padding: 1.25rem; text-align: center; }
.stat-block strong { display: block; font-family: var(--font-display); font-size: 2.2rem; color: var(--color-accent); }
.stat-block span { font-size: .8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 860px) {
	.about-teaser__grid, .about-full__grid { grid-template-columns: 1fr; }
	.about-full__portrait-col { position: static; }
	.about-full__stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Services
   ========================================================================== */
.services-teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin: 2.5rem 0; }
.service-card { border-top: 1px solid var(--color-line); padding-top: 1.5rem; position: relative; }
.service-card__num { font-family: var(--font-display); font-size: 2.5rem; color: var(--color-line); position: absolute; top: 1rem; right: 0; }
.service-card h3 { font-size: 1.3rem; margin-bottom: .75rem; }
.service-card p { color: var(--color-text-muted); font-size: .95rem; }

.service-block { display: grid; grid-template-columns: 100px 1fr; gap: 1.5rem; padding: 3rem 0; border-bottom: 1px solid var(--color-line); }
.service-block__num { font-family: var(--font-display); font-size: 3rem; color: var(--color-accent); }
.service-block h2 { font-size: 1.8rem; }
.service-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 2rem; margin-top: 1.25rem; }
.service-list li { color: var(--color-text-muted); padding-left: 1.1rem; position: relative; font-size: .95rem; }
.service-list li::before { content: '·'; color: var(--color-accent); position: absolute; left: 0; font-size: 1.3rem; line-height: 1; }

@media (max-width: 700px) {
	.services-teaser__grid { grid-template-columns: 1fr; }
	.service-block { grid-template-columns: 1fr; }
	.service-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner { background: var(--color-bg-alt); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.cta-banner__inner { max-width: 780px; margin: 0 auto; padding: 4.5rem 1.5rem; text-align: center; }
.cta-banner__quote { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--color-text); margin-bottom: 2rem; line-height: 1.5; }

/* ==========================================================================
   Portfolio grid & cards
   ========================================================================== */
.portfolio-filters { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.portfolio-filter {
	background: transparent; border: 1px solid var(--color-line); color: var(--color-text-muted);
	padding: .6rem 1.4rem; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
	cursor: pointer; border-radius: var(--radius); transition: all var(--transition);
}
.portfolio-filter.is-active, .portfolio-filter:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-dark); }

.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.portfolio-grid--teaser { margin-bottom: 2.5rem; }
.portfolio-card { display: block; }
.portfolio-card__media {
	position: relative; aspect-ratio: 4/5; overflow: hidden;
	background: var(--color-bg-alt); border-radius: var(--radius);
}
.portfolio-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.portfolio-card:hover .portfolio-card__media img { transform: scale(1.06); }
.portfolio-card__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg)); }

/* Overlay meta, revealed on hover — image stays the hero, text appears on demand */
.portfolio-card__overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 1.5rem; background: linear-gradient(0deg, rgba(20,16,12,.92) 0%, rgba(20,16,12,.15) 65%, transparent 100%);
	opacity: 0; transition: opacity var(--transition);
}
.portfolio-card:hover .portfolio-card__overlay { opacity: 1; }
.portfolio-card__overlay .eyebrow { font-size: .64rem; margin-bottom: .25rem; color: var(--color-accent); }
.portfolio-card__overlay h3 { font-size: 1.15rem; margin-bottom: .15rem; color: var(--color-text); }
.portfolio-card__overlay .portfolio-card__venue { color: var(--color-text-muted); font-size: .82rem; margin: 0; }

/* Static meta beneath the image, for touch devices where hover doesn't apply */
.portfolio-card__meta { padding-top: .9rem; }
.portfolio-card__meta .eyebrow { font-size: .68rem; margin-bottom: .3rem; }
.portfolio-card__meta h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.portfolio-card__venue { color: var(--color-text-muted); font-size: .85rem; margin: 0; }

@media (hover: hover) {
	.portfolio-card__meta { display: none; } /* desktop: rely on the hover overlay instead */
}

@media (max-width: 960px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* Portfolio single */
.portfolio-single__hero { max-height: 78vh; overflow: hidden; }
.portfolio-single__hero img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-single__intro { max-width: 780px; margin: 0 auto; padding: 3.5rem 1.5rem 1rem; text-align: center; }
.portfolio-single__intro h1 { font-size: clamp(2rem, 4vw, 3rem); }
.portfolio-single__meta { color: var(--color-text-muted); text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
.portfolio-single__quote { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; margin: 2rem 0; }
.portfolio-single__quote cite { display: block; font-style: normal; font-family: var(--font-body); font-size: .8rem; color: var(--color-accent); margin-top: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.portfolio-single__content { max-width: 780px; margin: 0 auto; padding: 1rem 1.5rem 4rem; color: var(--color-text-muted); }
.portfolio-single__content img { border-radius: var(--radius); margin: 1.5rem 0; }
.portfolio-single__nav { display: flex; justify-content: space-between; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem 4rem; font-size: .9rem; }
.portfolio-single__nav a { color: var(--color-accent); }

.portfolio-single__credits { max-width: 780px; margin: 3rem auto 0; padding: 2rem 1.5rem 0; border-top: 1px solid var(--color-line); }
.portfolio-single__credits h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); font-family: var(--font-body); font-weight: 500; margin-bottom: 1.25rem; }
.portfolio-single__credits ul { display: grid; gap: .75rem; }
.portfolio-single__credits li { color: var(--color-text-muted); font-size: .95rem; }
.portfolio-single__credits li strong { color: var(--color-text); font-weight: 500; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-line); margin: 2.5rem 0; }
.testimonial-grid--full { grid-template-columns: repeat(2, 1fr); }
.testimonial-card {
	padding: 2.25rem 2rem; background: var(--color-bg);
	transition: background var(--transition);
	position: relative;
}
.testimonial-card:hover { background: var(--color-bg-alt); }
.testimonial-card::before {
	content: '\201C'; display: block; font-family: var(--font-display);
	font-size: 3.2rem; line-height: 1; color: var(--color-accent);
	opacity: .3; margin-bottom: .25rem;
}
.testimonial-card p { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.5rem; }
.testimonial-card footer strong { display: block; font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: .82rem; letter-spacing: .04em; }
.testimonial-card footer span { font-size: .7rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 960px) { .testimonial-grid, .testimonial-grid--full { grid-template-columns: 1fr; } }

/* ==========================================================================
   As featured in
   ========================================================================== */
.featured-in { text-align: center; }
.featured-in__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 3rem; margin-top: 1.5rem; }
.featured-in__list li { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-text-muted); }
.featured-in__list li span { display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-line); margin-top: .3rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-teaser { background: var(--color-bg-alt); text-align: center; }
.contact-teaser__inner { max-width: 620px; margin: 0 auto; }
.contact-page__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }
.contact-details { margin: 2rem 0; }
.contact-details div { display: flex; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--color-line); }
.contact-details dt { color: var(--color-text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.contact-page__service-area { border: 1px solid var(--color-accent); padding: 1.25rem; }
.contact-page__service-area strong { color: var(--color-accent); display: block; margin-bottom: .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }

.contact-form { display: grid; gap: 1.25rem; }
.form-section-title {
	font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--color-accent);
	margin: 1.5rem 0 -.25rem; padding-top: 1.5rem; border-top: 1px solid var(--color-line);
}
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.form-row label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: .5rem; }
.form-row input, .form-row select, .form-row textarea {
	width: 100%; background: var(--color-bg-alt); border: 1px solid var(--color-line);
	color: var(--color-text); padding: .85rem 1rem; font-family: var(--font-body); font-size: .95rem;
	border-radius: var(--radius);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--color-accent); outline: none; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-note { font-size: .8rem; color: var(--color-text-muted); margin-top: -.5rem; }
.hp-field { position: absolute; left: -9999px; }
.form-notice { padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-radius: var(--radius); font-size: .9rem; }
.form-notice--success { background: rgba(220,161,121,.15); border: 1px solid var(--color-accent); }
.form-notice--error { background: rgba(200,80,60,.15); border: 1px solid #C8503C; }

@media (max-width: 860px) {
	.contact-page__grid { grid-template-columns: 1fr; }
	.form-row--split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Generic page / post
   ========================================================================== */
.page-hero { max-width: var(--container); margin: 0 auto; padding: 5rem 1.5rem 2rem; text-align: center; }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.page-hero__lede { max-width: 620px; margin: 1rem auto 0; color: var(--color-text-muted); font-style: italic; font-family: var(--font-display); }
.page-content { max-width: 780px; margin: 0 auto; color: var(--color-text-muted); }

/* FAQ accordion */
.faq-group { max-width: 820px; margin: 0 auto; padding-top: 4rem; }
.faq-group:first-child { padding-top: 0; }
.faq-group h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 2rem; }
.faq-list { display: grid; gap: 1px; background: var(--color-line); }
.faq-item { background: var(--color-bg); }
.faq-item summary {
	cursor: pointer; list-style: none; padding: 1.5rem 3rem 1.5rem 0; position: relative;
	font-family: var(--font-display); font-size: 1.15rem; color: var(--color-text);
	transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: '+'; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
	font-family: var(--font-body); font-size: 1.6rem; font-weight: 300; color: var(--color-accent);
	transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item:hover summary { color: var(--color-accent); }
.faq-item__body { padding: 0 3rem 1.75rem 0; color: var(--color-text-muted); font-size: .95rem; line-height: 1.7; }
.faq-item__body p { margin-bottom: 0; }

.faq-table { width: 100%; margin: 1.25rem 0; border-collapse: collapse; }
.faq-table th, .faq-table td { text-align: left; padding: .6rem 1rem; border: 1px solid var(--color-line); font-size: .9rem; }
.faq-table th { color: var(--color-accent); text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; font-weight: 500; }
.faq-table td { color: var(--color-text-muted); }

/* Blog post photo gallery (50-100 images, packed responsive grid) */
.post-gallery {
	max-width: 1100px; margin: 3rem auto 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 6px;
}
.post-gallery__item { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--color-bg-alt); }
.post-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease, opacity 200ms ease; }
.post-gallery__item:hover img { transform: scale(1.05); opacity: .9; }
.post-list { display: grid; gap: 3rem; max-width: 780px; margin: 0 auto; }
.post-list__item h2 { font-size: 1.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-line); padding: 4.5rem 1.5rem 2rem; }
.site-footer__grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }
.site-logo--footer { font-size: 1.6rem; margin-bottom: 1rem; }
.site-footer__brand p { color: var(--color-text-muted); font-size: .9rem; max-width: 320px; }
.social-links { display: flex; gap: 1.25rem; margin-top: 1rem; }
.social-links a { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.social-links a:hover { color: var(--color-accent); }
.site-footer__col h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); margin-bottom: 1.1rem; }
.site-footer__col ul { display: grid; gap: .65rem; }
.site-footer__col a { color: var(--color-text-muted); font-size: .9rem; }
.site-footer__col a:hover { color: var(--color-text); }
.site-footer__bottom {
	max-width: var(--container); margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--color-line);
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
	font-size: .78rem; color: var(--color-text-muted);
}

@media (max-width: 860px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.site-footer__grid { grid-template-columns: 1fr; }
	.site-footer__bottom { flex-direction: column; }
}