/* ── Homepage ─────────────────────────────────────────────────── */
/* The design's fixed 1440px-canvas paddings (80px/160px) overflow a real
   viewport, so every one below is clamped to the available width instead —
   this is what keeps the page from scrolling sideways. Only the product
   tracks (.ac-cc-track, .ac-home-*-track) should ever scroll horizontally. */
.ac-home, .ac-home *, .ac-home *::before, .ac-home *::after { box-sizing: border-box; }
.ac-home { background: var(--ac-cream); overflow-x: hidden; max-width: 100%; }

/* Charcoal ("dark") buttons on the homepage use the same Misty Green hover
   fill as the Mah Jong product page (css/product-single.css,
   .ac-product-page .ac-btn--dark:hover) — border stays Charcoal Black, only
   the fill + text swap. Scoped to .ac-home so other pages are unaffected. */
.ac-home .ac-btn { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.ac-home .ac-btn--dark:hover {
	background   : #E3E8D6;
	color        : var(--ac-dark) !important;
	border-color : var(--ac-dark);
	opacity      : 1;
}

/* Hero */
.ac-home-hero {
	position         : relative;
	min-height       : 70vh;
	display          : flex;
	flex-direction   : column;
	justify-content  : flex-end;
	padding          : 0 clamp(20px, 5.5vw, 80px) clamp(40px, 8vw, 80px);
	background-color : var(--ac-dark);
	background-image : linear-gradient(-110.6deg, rgba(0,0,0,0) -22.8%, rgba(0,0,0,0.8) 77.2%), var(--ac-hero-img);
	background-size  : cover;
	background-position: 0px -22px;
}

/* Circular seal mark, positioned right of the hero copy in the original design (left: 1082px of a 1440px canvas) */
/* Fixed 200x100 "window" clipped to the top half of the badge (matches the
   original design, and lets the pink band's higher z-index cover the rest).
   The full 200x200 circular artwork spins continuously inside it. */
.ac-home-hero-seal {
	position : absolute;
	z-index  : 1;
	right    : clamp(20px, 15vw, 220px);
	bottom   : 0px;
	width    : 200px;
	height   : 100px;
	overflow : hidden;
	pointer-events: none;
}

.ac-home-hero-seal-spin {
	position  : absolute;
	top       : 0;
	left      : 0;
	width     : 200px;
	height    : 200px;
	animation : ac-seal-spin 12s linear infinite;
}

.ac-home-hero-seal-spin svg { display: block; }

@keyframes ac-seal-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.ac-home-hero-copy { max-width: 600px; display: flex; flex-direction: column; gap: 32px; }

.ac-home-hero-title {
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : 48px;
	line-height : 58px;
	color       : var(--ac-cream);
	margin      : 0;
}

.ac-home-hero-desc {
	font-family : var(--ac-font-b);
	font-size   : 16px;
	line-height : 26px;
	color       : var(--ac-cream);
	margin      : 0;
}

.ac-home-hero-ctas { display: flex; gap: 28px; flex-wrap: wrap; }

/* USP strip */
.ac-home-usp {
	position        : relative;
	z-index         : 2;
	display         : flex;
	flex-wrap       : nowrap;
	gap             : clamp(16px, 3vw, 50px);
	align-items     : flex-start;
	padding         : 32px clamp(20px, 5.5vw, 80px);
	background      : var(--ac-blush);
}

.ac-home-usp-label {
	font-family : var(--ac-font-b);
	font-weight : 500;
	font-size   : 20px;
	color       : var(--ac-dark);
	flex        : 0 0 auto;
}

.ac-home-usp-items { display: flex; flex-wrap: nowrap; gap: clamp(16px, 3vw, 50px); flex: 1; min-width: 0; }

.ac-home-usp-item { display: flex; gap: 15px; align-items: flex-start; flex: 1 1 0; min-width: 0; }

.ac-home-usp-icon {
	width           : 50px;
	height          : 50px;
	flex-shrink     : 0;
	border-radius   : 50%;
	border          : 1.5px solid rgba(43,42,41,0.68);
	display         : flex;
	align-items     : center;
	justify-content : center;
}

.ac-home-usp-text {
	display         : flex;
	flex-direction  : column;
	justify-content : flex-end;
	min-width       : 0;
}

.ac-home-usp-title {
	font-family : var(--ac-font-b);
	font-weight : 500;
	font-size   : 16px;
	line-height : 21px;
	color       : var(--ac-dark);
	margin      : 0 0 8px;
}

.ac-home-usp-desc {
	font-family : var(--ac-font-b);
	font-size   : 14px;
	line-height : 19px;
	color       : rgba(43,42,41,0.68);
	margin      : 0;
}

/* Built From the Finest Materials */
.ac-home-materials {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 32px;
	padding        : clamp(40px, 8vw, 80px) clamp(20px, 8vw, 160px) 60px;
	background     : var(--ac-cream);
}

.ac-home-materials-title {
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h2-size);
	line-height : var(--ac-h2-lh);
	color       : var(--ac-dark);
	text-align  : center;
	margin      : 0;
}

.ac-home-materials-grid {
	display               : grid;
	grid-template-columns : repeat(3, 1fr);
	gap                   : 24px;
	width                 : 100%;
	max-width             : 1120px;
}

.ac-home-material {
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	gap             : 18px;
	padding         : 20px 24px;
	text-align      : center;
}

.ac-home-material-icon { width: 75px; height: 75px; display: flex; align-items: center; justify-content: center; }
.ac-home-material-icon svg { width: 100%; height: 100%; }

.ac-home-material-title {
	font-family : var(--ac-font-h);
	font-weight : 600;
	font-size   : 24px;
	line-height : 29px;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-home-material-desc {
	font-family : var(--ac-font-b);
	font-size   : 16px;
	line-height : 26px;
	color       : rgba(43,42,41,0.68);
	margin      : 0;
}

/* Social proof strip */
.ac-home-social-proof {
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-wrap       : wrap;
	gap             : 20px;
	padding         : 15px clamp(20px, 8vw, 160px);
	background      : var(--ac-dark);
}

.ac-home-social-proof-logo { height: 32px; width: auto; }

.ac-home-social-proof-quote {
	font-family : var(--ac-font-h);
	font-weight : 600;
	font-size   : 24px;
	line-height : 29px;
	color       : #fff;
	margin      : 0;
}

/* Sofas Built Around You */
.ac-home-sofas-grid {
	display        : flex;
	flex-direction : column;
	gap            : 30px;
	padding        : clamp(40px, 8vw, 80px);
	background     : var(--ac-cream);
}

.ac-home-sofas-grid-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.ac-home-sofas-grid-title {
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h2-size);
	line-height : var(--ac-h2-lh);
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-home-sofas-grid-body { display: flex; gap: 20px; align-items: stretch; min-width: 0; }

.ac-home-sofa-card {
	position          : relative;
	overflow          : hidden;
	display           : flex;
	flex-direction    : column;
	justify-content   : flex-end;
	gap               : 0;
	padding           : 30px;
	color             : var(--ac-cream);
	min-height        : 315px;
}

.ac-home-sofa-bg {
	position           : absolute;
	inset              : 0;
	background-size    : cover;
	background-position: center;
	transition         : transform 0.4s ease;
}

.ac-home-sofa-card:hover .ac-home-sofa-bg,
.ac-home-sofa-card:focus .ac-home-sofa-bg { transform: scale(1.06); }

/* Same two-layer darkening as the Mah Jong page's .ac-signpost-overlay: a
   base gradient always visible, plus a second gradient that fades in on
   hover and reaches further up the card. */
.ac-home-sofa-overlay {
	position   : absolute;
	inset      : 0;
	background : linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(43,42,41,0) 30%);
}

.ac-home-sofa-overlay::after {
	content    : '';
	position   : absolute;
	inset      : 0;
	background : linear-gradient(0deg, rgba(43,42,41,0.4) 0%, rgba(43,42,41,0) 55%);
	opacity    : 0;
	transition : opacity 0.4s ease;
}

.ac-home-sofa-card:hover .ac-home-sofa-overlay::after,
.ac-home-sofa-card:focus .ac-home-sofa-overlay::after { opacity: 1; }

.ac-home-sofa-card > p { position: relative; z-index: 1; }

.ac-home-sofa-card--large { flex: 0 0 43%; min-height: 650px; min-width: 0; }

.ac-home-sofa-grid-small {
	flex           : 1;
	min-width      : 0;
	display        : grid;
	grid-template-columns: 1fr 1fr;
	gap            : 20px;
}

.ac-home-sofa-title {
	font-family : var(--ac-font-h);
	font-weight : 600;
	font-size   : 24px;
	line-height : 29px;
	margin      : 0 !important;
}

.ac-home-sofa-desc {
	font-family : var(--ac-font-b);
	font-size   : 16px;
	line-height : 26px;
	margin      : 0 !important;
}

/* Category signposts row */
.ac-home-category-row { display: flex; }

.ac-home-category-card {
	position           : relative;
	overflow           : hidden;
	flex               : 1;
	min-height         : 500px;
	display            : flex;
	flex-direction     : column;
	justify-content    : flex-end;
	align-items        : flex-start;
	gap                : 24px;
	padding            : 24px;
	text-decoration    : none;
}

.ac-home-category-bg {
	position           : absolute;
	inset              : 0;
	background-size    : cover;
	background-position: center;
	transition         : transform 0.4s ease;
}

.ac-home-category-card:hover .ac-home-category-bg,
.ac-home-category-card:focus .ac-home-category-bg { transform: scale(1.06); }

/* Same two-layer darkening as the Mah Jong page's .ac-signpost-overlay: a
   base gradient always visible, plus a second gradient that fades in on
   hover and reaches further up the card (74.09% vs 89.57%). */
.ac-home-category-overlay {
	position   : absolute;
	inset      : 0;
	background : linear-gradient(180deg, rgba(43,42,41,0) 50.09%, rgba(43,42,41,0.8) 89.57%);
}

.ac-home-category-overlay::after {
	content    : '';
	position   : absolute;
	inset      : 0;
	background : linear-gradient(180deg, rgba(43,42,41,0) 50.09%, rgba(43,42,41,0.4) 74.09%);
	opacity    : 0;
	transition : opacity 0.4s ease;
}

.ac-home-category-card:hover .ac-home-category-overlay::after,
.ac-home-category-card:focus .ac-home-category-overlay::after { opacity: 1; }

.ac-home-category-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }

.ac-home-category-card > .ac-btn { position: relative; z-index: 1; }

.ac-home-category-title {
	font-family : var(--ac-font-h);
	font-weight : 600;
	font-size   : 24px;
	line-height : 29px;
	color       : var(--ac-cream);
	margin      : 0;
}

.ac-home-category-subheading {
	font-family : var(--ac-font-b);
	font-weight : 400;
	font-size   : 14px;
	line-height : 19px;
	color       : var(--ac-cream);
	margin      : 0;
	max-height  : 0;
	opacity     : 0;
	overflow    : hidden;
	transition  : max-height 0.25s ease, opacity 0.2s ease;
}

.ac-home-category-card:hover .ac-home-category-subheading,
.ac-home-category-card:focus .ac-home-category-subheading {
	max-height : 40px;
	opacity    : 1;
}

/* Browse Example Set Ups bar */
.ac-home-browse-bar {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	gap             : 20px;
	padding         : 20px;
	background      : var(--ac-dark);
}

.ac-home-browse-bar-title {
	font-family : var(--ac-font-h);
	font-weight : 600;
	font-size   : 24px;
	line-height : 29px;
	color       : var(--ac-cream);
	margin      : 0;
}

/* From Our Studio Journal */
.ac-home-journal {
	display        : flex;
	flex-direction : column;
	gap            : 40px;
	padding        : clamp(40px, 8vw, 80px) clamp(20px, 8vw, 160px);
	background     : var(--ac-cream);
}

.ac-home-journal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* No "Read more" button (e.g. Service page's "Case Studies") — center the
   heading instead of leaving it pinned to one side of an empty row. */
.ac-home-journal-header--center { justify-content: center; text-align: center; }

.ac-home-journal-title {
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h2-size);
	line-height : var(--ac-h2-lh);
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-home-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.ac-home-journal-card { display: block; background: var(--ac-sand); text-decoration: none; }

.ac-home-journal-card-img-wrap { height: 240px; overflow: hidden; }

.ac-home-journal-card-img {
	width               : 100%;
	height              : 100%;
	background-size     : cover;
	background-position : center;
	background-color    : #c4c4c4;
	transition          : transform 0.4s ease;
}

.ac-home-journal-card:hover .ac-home-journal-card-img,
.ac-home-journal-card:focus .ac-home-journal-card-img { transform: scale(1.15); }

.ac-home-journal-card-body {
	padding    : 24px;
	background : #EDE3D7;
	transition : background 0.3s ease;
}

.ac-home-journal-card:hover .ac-home-journal-card-body,
.ac-home-journal-card:focus .ac-home-journal-card-body { background: #2B2A29; }

.ac-home-journal-card-title {
	font-family : var(--ac-font-h);
	font-weight : 600;
	font-size   : 22px;
	line-height : 27px;
	color       : var(--ac-dark);
	margin      : 0;
	transition  : color 0.3s ease;
}

.ac-home-journal-card:hover .ac-home-journal-card-title,
.ac-home-journal-card:focus .ac-home-journal-card-title { color: #F7F3EE; }

/* Our Story — exact 720/720 halves, 453px tall, per Figma spec */
.ac-our-story {
	display : flex;
	align-items: stretch;
	min-height: 453px;
}

.ac-our-story-img {
	width               : 50%;
	background-size     : cover;
	background-position : center;
	background-color    : var(--ac-sand);
}

.ac-our-story-panel {
	width           : 50%;
	display         : flex;
	align-items     : center;
	justify-content : center;
	padding         : 80px 60px;
	background      : #EDE3D7;
}

.ac-our-story-inner { max-width: 600px; display: flex; flex-direction: column; align-items: flex-start; gap: 37px; }

.ac-our-story-heading {
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h2-size);
	line-height : var(--ac-h2-lh);
	color       : var(--ac-dark);
	margin      : 0 !important;
}

.ac-our-story-body { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

.ac-our-story-body p {
	font-family : var(--ac-font-b);
	font-weight : 400;
	font-size   : 16px;
	line-height : 26px;
	color       : var(--ac-dark);
	margin      : 0 !important;
}

@media (max-width: 900px) {
	.ac-home-hero            { min-height: 46vh; padding: 0 32px; justify-content: center; align-items: center; text-align: center; gap: 24px; background-size: cover; background-position: center; }
	.ac-home-hero-copy       { align-items: center; gap: 24px; max-width: 100%; }
	.ac-home-hero-title      { font-size: 32px; line-height: 40px; text-align: center; }
	.ac-home-hero-desc       { display: none; }
	.ac-home-hero-ctas       { flex-direction: column; gap: 12px; align-items: center; width: 100%; }
	.ac-home-hero-ctas .ac-btn { width: 100%; max-width: 209px; align-self: center; justify-content: center; }
	.ac-home-hero-seal       {
		left     : 50%;
		right    : auto;
		bottom   : 0;
		width    : 125px;
		height   : 63px;
		transform: translateX(-50%);
	}
	.ac-home-hero-seal-spin      { width: 125px; height: 125px; }
	.ac-home-hero-seal-spin svg  { width: 100%; height: 100%; }
	.ac-home-usp             { flex-direction: column; align-items: flex-start; padding: 24px 16px; gap: 24px; }
	.ac-home-usp-label       { font-size: 18px; line-height: 23px; }
	.ac-home-usp-items       { flex-direction: column; gap: 16px; }
	.ac-home-usp-item        { max-width: 100%; }
	.ac-home-usp-title       { margin: 0px; }

	/* Built From the Finest Materials: mockup stacks these as full-width sand
	   rows (icon + text side by side), not the desktop 3-col grid. */
	.ac-home-materials       { padding: 60px 16px 24px; gap: 40px; }
	.ac-home-materials-title { font-size: 24px; line-height: 32px; }
	.ac-home-materials-grid  {
		display               : flex;
		flex-direction         : column;
		grid-template-columns  : none;
		gap                    : 6px;
	}
	.ac-home-material {
		display               : grid;
		grid-template-columns : 44px 1fr;
		column-gap            : 16px;
		row-gap               : 6px;
		align-items           : center;
		text-align            : left;
		padding               : 24px 16px;
		background            : var(--ac-sand);
	}
	.ac-home-material-icon  { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; flex-shrink: 0; }
	.ac-home-material-title { grid-column: 2; grid-row: 1; font-size: 20px; line-height: 30px; }
	.ac-home-material-desc  { grid-column: 2; grid-row: 2; font-size: 16px; line-height: 21px; }

	.ac-home-social-proof    { padding: 15px 24px; flex-direction: row; flex-wrap: nowrap; gap: 12px; }
	.ac-home-social-proof-quote { font-size: 14px; line-height: 18px; white-space: nowrap; }

	.ac-home-sofas-grid      { padding: 60px 16px 40px; }
	.ac-home-sofas-grid-header{ flex-direction: column; align-items: center; text-align: center; gap: 0px; }
	.ac-home-sofas-grid-header .ac-btn { align-self: center; }
	.ac-home-sofas-grid-title{ font-size: 24px; line-height: 32px; }
	.ac-home-sofas-grid-body { flex-direction: column; }
	.ac-home-sofa-card--large{ min-height: 350px; }
	.ac-home-sofa-grid-small { grid-template-columns: 1fr 1fr; }
	.ac-home-sofa-card--small{ aspect-ratio: 1 / 1; min-height: 0; }
	.ac-home-sofa-card       { padding: 16px; }
	.ac-home-sofa-title      { font-size: 20px; line-height: 30px; }
	.ac-home-sofa-desc       { display: none; }

	.ac-home-category-row    { flex-direction: column; }
	.ac-home-category-title  { font-size: 24px; line-height: 32px; }

	.ac-home-browse-bar      { padding: 16px; gap: 12px; }
	.ac-home-browse-bar-title{ font-size: 16px; line-height: 20px; }
	.ac-home-browse-bar .ac-btn { flex-shrink: 0; padding-left: 14px; padding-right: 14px; white-space: nowrap; }

	/* From Our Studio Journal: mockup scrolls the cards horizontally on
	   mobile instead of stacking them full-width. */
	.ac-home-journal         { padding: 60px 0 40px; gap: 24px; }
	.ac-home-journal-header  { padding: 0 16px; }
	.ac-home-journal-title   { font-size: 24px; line-height: 32px; }
	.ac-home-journal-grid    {
		display         : flex;
		grid-template-columns: none;
		gap             : 8px;
		overflow-x      : auto;
		padding         : 0 16px;
		scroll-behavior : smooth;
		scrollbar-width : thin;
		scrollbar-color : var(--ac-dark) var(--ac-sand);
	}
	.ac-home-journal-card      { flex: 0 0 300px; min-width: 0; }
	.ac-home-journal-card-img-wrap { height: 200px; }
	.ac-home-journal-card-title { font-size: 18px; line-height: 23px; }

	.ac-our-story            { flex-direction: column; }
	.ac-our-story-img,
	.ac-our-story-panel      { width: 100%; }
	.ac-our-story-img        { min-height: 260px; }
	.ac-our-story-panel      { padding: 40px 24px; }
	.ac-our-story-heading    { font-size: 24px; line-height: 32px; }
}