/* =========================================================================
   CasaDeco — Design System
   1. Fonts          6. Buttons & links
   2. Tokens         7. Header & navigation
   3. Reset          8. Sections
   4. Typography     9. Components
   5. Layout        10. Footer / utilities / responsive
   ========================================================================= */

/* 1. Fonts — self-hosted variable subsets (latin) ------------------------ */
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('../fonts/cormorant-garamond-var.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jost';
	src: url('../fonts/jost-var.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* 2. Tokens -------------------------------------------------------------- */
:root {
	/* Palette — sage green sampled from the CasaDeco logo (mark #5f7264, wordmark #4a5a4d), on a
	   soft stone neutral scale. Every pairing below is contrast-checked:
	   --sage is decorative (rules, borders, pins); --sage-deep is the text and
	   button fill on light; --sage-light is the accent on dark. */
	--ink: #1a211d;
	--ink-80: #2e3833;
	--ink-60: #55605a;
	--muted: #626c66;
	--sand: #f1f3ee;
	--sand-deep: #e3e7de;
	--cream: #fbfcfa;
	--sage: #5f7264;
	--sage-deep: #4a5a4d;
	--sage-light: #8ca290;
	--sage-tint: rgba(95, 114, 100, 0.12);
	/* Sheer curtain veil — translucent so the artwork reads through it as the
	   panels part, rather than being hidden behind a solid block. */
	--veil: linear-gradient(180deg,
		rgba(95, 114, 100, 0.58) 0%,
		rgba(74, 90, 77, 0.68) 55%,
		rgba(26, 33, 29, 0.78) 100%);
	--veil-flat: rgba(74, 90, 77, 0.62);
	--line: rgba(26, 33, 29, 0.12);
	--line-soft: rgba(26, 33, 29, 0.07);
	--line-inv: rgba(237, 240, 236, 0.18);

	/* Type */
	--font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
	--font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	--step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
	--step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
	--step-3: clamp(1.9rem, 1.55rem + 1.75vw, 3rem);
	--step-4: clamp(2.4rem, 1.75rem + 3.2vw, 4.4rem);
	--step-5: clamp(2.9rem, 1.8rem + 5.4vw, 6rem);

	/* Space */
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--section-y: clamp(4.5rem, 9vw, 8.5rem);
	--max: 1280px;
	--max-narrow: 760px;

	--radius: 2px;
	--shadow-sm: 0 1px 2px rgba(26, 33, 29, 0.05), 0 6px 18px rgba(26, 33, 29, 0.06);
	--shadow-lg: 0 24px 60px -20px rgba(26, 33, 29, 0.28);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--header-h: 84px;
}

/* 3. Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink-80);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a { color: inherit; text-decoration-color: var(--sage); text-underline-offset: 0.22em; }
button, input, select, textarea { font: inherit; color: inherit; }
figure { margin: 0; }

::selection { background: var(--sage-deep); color: var(--cream); }

:focus-visible {
	outline: 2px solid var(--sage);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: var(--cream);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* 4. Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.08;
	color: var(--ink);
	margin: 0 0 0.5em;
	letter-spacing: -0.005em;
}

/* Cormorant defaults to old-style figures, which read as letters at display
   sizes ("10+" looks like "IO+"). Force lining figures wherever we set
   numbers in the display face. */
.stat__num,
.icard__num,
.process__step::before,
h1, h2, h3, h4, h5 {
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: 'lnum' 1, 'tnum' 1;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sage-deep);
	margin: 0 0 1.1rem;
}
.eyebrow::before {
	content: '';
	width: 2rem;
	height: 1px;
	background: var(--sage);
	flex: none;
}
.eyebrow--center::after {
	content: '';
	width: 2rem;
	height: 1px;
	background: var(--sage);
	flex: none;
}

.lede {
	font-size: var(--step-1);
	line-height: 1.55;
	color: var(--ink-60);
	font-weight: 300;
}

.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head--center { margin-inline: auto; text-align: center; }

/* Sections whose heading is long enough to wrap inside the 46rem measure even
   though it fits the full column. Lifting the cap lets the heading sit on one
   line from roughly 1200px up; the lede keeps its own measure, because without
   it the paragraph would run to about 135 characters. Below that width they
   still wrap, which is correct — at 390px a single line would need a 15px
   heading, smaller than the body text. */
#services .section__head,
#why-choose-us .section__head,
#projects .section__head,
#process .section__head,
#how-we-work .section__head,                       /* the process partial's id is overridable — service pages use how-we-work */
#brands .section__head,
#service-areas .section__head,
#who-we-are .section__head,
#commitment .section__head,
#solutions .section__head,                         /* the service-page heads: What We Offer, Where We */
#spaces .section__head,                            /* Work, Why Choose CasaDeco and Materials & */
#why .section__head,                               /* Systems. Measured at 736px (556px for Materials, */
#options .section__head { max-width: none; }       /* inside the split), against headings up to 1010px. */

/* Both sections used a narrow wrap, which left their headings only 664px —
   too little for 1003px and 835px respectively. The wraps are now full width
   for the headings' sake, so the body copy is capped separately, otherwise it
   would run to about 135 characters a line. */
#who-we-are p,
#commitment p { max-width: 46rem; margin-inline: auto; }

/* --- Line balancing in prose ---------------------------------------------
   Paragraphs were breaking with two-word orphans on the last line — "hospitality
   spaces." measured 133px under a 719px line, a 586px spread. `balance` evens
   the lines out; the same paragraph drops to a 74px spread.

   `text-wrap: pretty` was tried first and changed nothing at all: Chrome's
   implementation only rescues last lines of a single word.

   Scope is deliberate. Balancing narrows a block so its lines match, which is
   right for prose but wrong inside a card, tile or review, where the text
   should reach the container's edge — pulling it in reads as a mistake.
   Measured: it would have narrowed 78 of 147 left-aligned paragraphs.
   Chrome also stops balancing past six lines, so long body copy is untouched. */
.hero p,
.page-hero p,
.section__head .lede,
.section__head p,
.split p,
.cta-band p,
#who-we-are p,
#commitment p { text-wrap: balance; }

#services .section__head .lede,
#why-choose-us .section__head .lede,
#projects .section__head .lede,
#process .section__head .lede,
#how-we-work .section__head .lede,
#brands .section__head .lede,
#service-areas .section__head .lede,
#who-we-are .section__head .lede,
#solutions .section__head .lede,
#spaces .section__head .lede,
#why .section__head .lede { max-width: 46rem; }

/* The cap above sets a measure and nothing else. Centring is a separate job:
   under a left-aligned heading an auto-centred lede sat 224px to the right of
   the heading it belongs to. Only a centred head should centre it. */
.section__head--center .lede { margin-inline: auto; }

.section__head p { color: var(--ink-60); }
.section__head h2 { margin-bottom: 0.4em; }

/* 5. Layout -------------------------------------------------------------- */
.wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--max-narrow); }
.wrap--wide { max-width: 1560px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: rgba(237, 240, 236, 0.78); }
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--cream); }
.section--ink .eyebrow { color: var(--sage-light); }
.section--ink .lede { color: rgba(237, 240, 236, 0.72); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Scroll reveal */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 6. Buttons ------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1rem 2rem;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background 0.35s var(--ease), color 0.35s var(--ease),
		border-color 0.35s var(--ease), transform 0.35s var(--ease);
	will-change: transform;
}
.btn:hover { transform: translateY(-2px); }

/* Accent fills behind text use --sage-deep: cream on --sage is only 4.18:1,
   under AA for labels at this size. --sage stays for decorative fills. */
.btn--primary { background: var(--sage-deep); color: var(--cream); border-color: var(--sage-deep); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); }

.btn--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--dark:hover { background: var(--sage-deep); border-color: var(--sage-deep); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); }

.btn--light { background: transparent; color: var(--cream); border-color: var(--line-inv); }
.btn--light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.btn-row--center { justify-content: center; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sage-deep);
}
.link-arrow svg { transition: transform 0.35s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* 7. Header -------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--header-h);
	display: flex;
	align-items: center;
	transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), height 0.4s var(--ease);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--sage); }
.brand__mark { flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
/* The logo wordmark is a bold geometric sans, so the lockup uses Jost rather
   than the display serif used for headings. */
.brand__name {
	font-family: var(--font-body);
	font-size: 1.32rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sage-deep);
}
.brand__tag {
	font-size: 0.5rem;
	font-weight: 400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 0.34rem;
	white-space: nowrap;
}

/* Transparent-over-hero state */
body:not(.has-solid-header) .site-header:not(.is-stuck) { background: transparent; }
body:not(.has-solid-header) .site-header:not(.is-stuck) .brand__name,
body:not(.has-solid-header) .site-header:not(.is-stuck) .nav__link,
body:not(.has-solid-header) .site-header:not(.is-stuck) .nav-toggle span { color: var(--cream); }
body:not(.has-solid-header) .site-header:not(.is-stuck) .brand__tag { color: rgba(237, 240, 236, 0.7); }
/* Over a hero image the whole lockup goes cream; the mark follows via
   currentColor, so no separate fill/stroke override is needed. */
body:not(.has-solid-header) .site-header:not(.is-stuck) .brand { color: var(--cream); }
body:not(.has-solid-header) .site-header:not(.is-stuck) .nav-toggle span { background: var(--cream); }

.site-header.is-stuck,
body.has-solid-header .site-header {
	background: rgba(255, 252, 248, 0.92);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 1px 0 var(--line-soft);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
	display: inline-block;
	padding: 0.4rem 0;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink-80);
	transition: color 0.3s var(--ease);
}
.nav__link::after {
	content: '';
	display: block;
	height: 1px;
	width: 0;
	background: var(--sage);
	transition: width 0.35s var(--ease);
	margin-top: 3px;
}
.nav__link:hover::after,
.nav__item.current-menu-item > .nav__link::after,
.nav__item.current-menu-parent > .nav__link::after,
.nav__item.current-menu-ancestor > .nav__link::after { width: 100%; }

/* Dropdown */
.nav__item--has-children > .nav__link::before {
	content: '';
	position: absolute;
	right: -0.85rem;
	top: 50%;
	width: 5px; height: 5px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.6;
}
.nav__sub {
	position: absolute;
	top: calc(100% + 0.9rem);
	left: -1.25rem;
	min-width: 17rem;
	padding: 0.6rem 0;
	margin: 0;
	list-style: none;
	background: var(--cream);
	border: 1px solid var(--line-soft);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav__item--has-children:hover > .nav__sub,
.nav__item--has-children:focus-within > .nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.nav__sub a {
	display: block;
	padding: 0.62rem 1.35rem;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none;
	color: var(--ink-60);
	transition: background 0.25s var(--ease), color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.nav__sub a:hover { background: var(--sand); color: var(--ink); padding-left: 1.65rem; }

.header__cta { display: inline-flex; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.nav-toggle span {
	display: block;
	width: 24px; height: 1.5px;
	background: var(--ink);
	transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 8. Hero ---------------------------------------------------------------- */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(92vh, 900px);
	padding-top: calc(var(--header-h) + 3rem);
	padding-bottom: clamp(3.5rem, 8vw, 7rem);
	overflow: hidden;
	background: var(--ink);
	isolation: isolate;
}
.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Two-axis scrim. The horizontal pass is what makes the headline legible over
   a bright photograph — the copy is left-aligned, so the left third needs a
   reliable dark base while the right stays open enough to show the image.
   Measured at 2.49:1 with the vertical gradient alone (below the 3:1 AA floor
   for large text); the pair holds well clear of it on a light interior shot. */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(26, 33, 29, 0.88) 0%, rgba(26, 33, 29, 0.72) 30%, rgba(26, 33, 29, 0.34) 62%, rgba(26, 33, 29, 0.12) 100%),
		linear-gradient(180deg, rgba(26, 33, 29, 0.5) 0%, rgba(26, 33, 29, 0.18) 38%, rgba(26, 33, 29, 0.78) 100%);
}
.hero__inner { max-width: 60rem; }
.hero .eyebrow { color: var(--sage-light, #8ca290); }
.hero h1 {
	color: var(--cream);
	font-size: var(--step-5);
	font-weight: 400;
	margin-bottom: 0.35em;
	text-wrap: balance;
}
.hero p {
	max-width: 42rem;
	color: rgba(237, 240, 236, 0.82);
	font-size: var(--step-1);
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 2.2rem;
}
.hero__scroll {
	position: absolute;
	right: var(--gutter);
	bottom: clamp(3.5rem, 8vw, 7rem);
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 0.65rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(237, 240, 236, 0.6);
	writing-mode: vertical-rl;
}
.hero__scroll::after {
	content: '';
	width: 1px; height: 3.5rem;
	background: linear-gradient(to bottom, var(--sage), transparent);
}

/* Page hero (inner pages) */
.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(340px, 46vh, 520px);
	padding-top: calc(var(--header-h) + 2.5rem);
	padding-bottom: 3rem;
	background: var(--ink);
	overflow: hidden;
	isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, rgba(26, 33, 29, 0.86) 0%, rgba(26, 33, 29, 0.6) 55%, rgba(26, 33, 29, 0.4) 100%);
}
.page-hero h1 { color: var(--cream); max-width: 22ch; text-wrap: balance; }
.page-hero p { max-width: 46rem; color: rgba(237, 240, 236, 0.8); font-size: var(--step-1); font-weight: 300; }

/* Breadcrumbs */
.breadcrumbs {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: rgba(237, 240, 236, 0.62);
	margin-bottom: 1.4rem;
}
.breadcrumbs a { text-decoration: none; color: inherit; transition: color 0.25s var(--ease); }
.breadcrumbs a:hover { color: var(--sage-light, #8ca290); }
.breadcrumbs__sep { margin: 0 0.55rem; opacity: 0.5; }
.breadcrumbs--light { color: var(--muted); }
.breadcrumbs--light a:hover { color: var(--sage-deep); }

/* 9. Components ---------------------------------------------------------- */

/* Media + text split */
.split {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 4 / 3; }

/* Brass frame accent behind imagery */
.framed { position: relative; }
.framed::before {
	content: '';
	position: absolute;
	inset: auto -1.1rem -1.1rem auto;
	width: 62%;
	height: 62%;
	border: 1px solid var(--sage);
	z-index: -1;
}

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--cream); padding: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.section--sand .stat { background: var(--sand); }
.stat__num { display: block; font-family: var(--font-display); font-size: var(--step-3); color: var(--sage-deep); line-height: 1; }
.stat__label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 0.7rem; }

/* Service card */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cream);
	border: 1px solid var(--line-soft);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { border-color: var(--sage); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand-deep); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: clamp(1.4rem, 2.5vw, 1.9rem); display: flex; flex-direction: column; flex: 1; gap: 0.6rem; }
.card__title { font-size: var(--step-1); margin: 0; transition: color 0.3s var(--ease); }
.card:hover .card__title { color: var(--sage-deep); }
.card__text { font-size: 0.92rem; color: var(--ink-60); margin: 0; flex: 1; }
.card__more {
	display: inline-flex; align-items: center; gap: 0.45rem;
	font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--sage-deep); margin-top: 0.4rem;
}
.card__more svg { transition: transform 0.35s var(--ease); }
.card:hover .card__more svg { transform: translateX(5px); }

/* Horizontal card scroller -------------------------------------------------
   One row of cards that scrolls sideways instead of wrapping. The track keeps
   vertical padding so the cards' hover lift and shadow are not clipped:
   `overflow-x: auto` forces the block axis to compute to `auto` as well, so
   anything drawn outside the padding box would either be cut off or add a
   stray vertical scrollbar. */
/* Column flex so the pause control can sit under the track and align right.
   The arrows are absolutely positioned, so they stay out of this flow. */
.hscroll { position: relative; display: flex; flex-direction: column; }

.hscroll__track {
	display: flex;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	min-width: 0;   /* flex item: allow it to be narrower than its content */
	overflow-x: auto;
	overscroll-behavior-x: contain;      /* don't trigger the browser's back-swipe */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Room for translateY(-4px) and --shadow-lg on hover. */
	padding: 0.5rem 0.25rem 1.75rem;
	margin: -0.5rem -0.25rem -0.75rem;
	/* No scrollbar: the arrows carry the affordance on desktop, and the
	   part-visible next card carries it on touch. Matches .subnav__list. */
	scrollbar-width: none;
}
.hscroll__track::-webkit-scrollbar { display: none; }
.hscroll__track:focus-visible {
	outline: 2px solid var(--sage);
	outline-offset: 4px;
}

/* Any direct child, so the same scroller serves service cards and project
   tiles without the CSS knowing which it is holding. */
.hscroll__track > * {
	/* Fixed basis: flex items must not shrink to fit, or there is no overflow
	   to scroll. Caps at 20rem so a wide screen shows a partial card, which is
	   the affordance that says "there is more this way". */
	flex: 0 0 clamp(15.5rem, 78vw, 20rem);
	scroll-snap-align: start;
}
/* Cards and review cards stretch to a common height, which is what makes a row
   of them look deliberate. Tiles are the exception: they size themselves from
   aspect-ratio, and stretching would override it. */
.hscroll__track > .tile { align-self: start; }

/* Arrows. Hidden until the script confirms the track overflows — the
   attribute selector outranks the display rule below so [hidden] wins. */
.hscroll__nav {
	position: absolute;
	top: calc(50% - 1.25rem);
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--line-soft);
	border-radius: 50%;
	background: var(--cream);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: background 0.3s var(--ease), color 0.3s var(--ease),
		border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.hscroll__nav[hidden] { display: none; }
.hscroll__nav:hover:not(:disabled) {
	background: var(--sage);
	border-color: var(--sage);
	color: var(--cream);
}
.hscroll__nav:disabled { opacity: 0; pointer-events: none; }
.hscroll__nav--prev { left: -1.35rem; }
.hscroll__nav--next { right: -1.35rem; }
.hscroll__nav--prev svg { transform: rotate(180deg); }

/* Auto-scroll. Set once, when the drift is switched on, and never removed.

   Snapping has to go: while the row moves it would drag it back to the nearest
   card every frame, and — the part that is easy to miss — re-enabling it the
   moment the drift pauses makes the row lurch backwards by up to most of a
   card width, right as someone hovers to read one. Measured at 121px.

   Smooth has to go too: assigning scrollLeft under `scroll-behavior: smooth`
   starts an eased animation, so re-targeting it every frame leaves it forever
   easing in and never actually moving. The arrows pass `behavior: 'smooth'`
   explicitly, which still wins over this, so they keep their easing. */
.hscroll__track.is-auto {
	scroll-snap-type: none;
	scroll-behavior: auto;
}


/* Below the widest breakpoint the wrap gutter is too tight to hang the arrows
   outside the track, and touch scrolling makes them redundant anyway. */
@media (max-width: 1180px) {
	.hscroll__nav { display: none; }
}

/* The global reduced-motion block sets scroll-behavior on `html`, which does
   not reach a scroll container that sets its own. Repeat it here, after the
   rule it has to beat. */
@media (prefers-reduced-motion: reduce) {
	.hscroll__track { scroll-behavior: auto; }
}

/* Numbered index card (no image) */
.icard {
	position: relative;
	padding: clamp(1.6rem, 3vw, 2.2rem);
	background: var(--cream);
	border: 1px solid var(--line-soft);
	transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
	height: 100%;
}
.icard:hover { border-color: var(--sage); transform: translateY(-3px); }
.section--sand .icard { background: var(--cream); }
.section--ink .icard { background: rgba(237, 240, 236, 0.04); border-color: var(--line-inv); }
.section--ink .icard__num { color: var(--sage-light); }
.icard__num {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--sage-deep);
	letter-spacing: 0.08em;
	display: block;
	margin-bottom: 1rem;
}
/* When the label IS the card's heading, it is marked up as an h3 for document
   structure. `.icard h3` (0,1,1) would otherwise beat `.icard__num` (0,1,0)
   and resize it, so the label's own sizing is restated at equal weight. */
.icard h3.icard__num { font-size: 1.05rem; margin-bottom: 1rem; }
.icard h3 { font-size: var(--step-1); margin-bottom: 0.45rem; }
.icard p { font-size: 0.92rem; color: var(--ink-60); margin: 0; }
.section--ink .icard p { color: rgba(237, 240, 236, 0.7); }

/* Project types: an .icard that is also a link through to that category. The
   cards sit in a column so the "View …" line pins to the bottom regardless of
   how long each description runs. */
a.icard { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.icard p { flex: 1; }
.icard__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.1rem;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sage-deep);
}
.icard__more svg { transition: transform 0.35s var(--ease); }
a.icard:hover .icard__more svg { transform: translateX(4px); }
a.icard:hover h3 { color: var(--sage-deep); }
.section--ink .icard__more { color: var(--sage-light); }

/* Icon feature */
.feature { display: flex; flex-direction: column; gap: 0.85rem; }
.feature__icon {
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border: 1px solid var(--sage);
	color: var(--sage-deep);
	border-radius: 50%;
	flex: none;
}
.section--ink .feature__icon { color: var(--sage-light); }
.feature h3 { font-size: var(--step-1); margin: 0; }
.feature p { font-size: 0.92rem; color: var(--ink-60); margin: 0; }
.section--ink .feature p { color: rgba(237, 240, 236, 0.7); }

/* Process timeline */
/* Three per row, so the six steps read as two rows of three. Fixed rather than
   auto-fit: auto-fit fitted four across at desktop, which split them 4 + 2.
   minmax(0, 1fr) not 1fr — a grid track's default min is auto, so a long step
   name would push the column wider than its share. */
.process { counter-reset: step; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .process { grid-template-columns: minmax(0, 1fr); } }
.process__step {
	position: relative;
	counter-increment: step;
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
	border-top: 1px solid var(--line);
}
.section--ink .process__step { border-color: var(--line-inv); }
.section--ink .process__step::before { color: var(--sage-light); }
.process__step::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--sage-deep);
	line-height: 1;
	margin-bottom: 1rem;
}
.process__step::after {
	content: '';
	position: absolute;
	top: -1px; left: 0;
	width: 0; height: 1px;
	background: var(--sage);
	transition: width 1.1s var(--ease);
}
.process__step.is-visible::after { width: 100%; }
.process__step h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.process__step p { font-size: 0.9rem; color: var(--ink-60); margin: 0; }
.section--ink .process__step p { color: rgba(237, 240, 236, 0.7); }

/* Project / portfolio tiles */
/* auto-FILL, not auto-fit: auto-fit collapses empty tracks, so filtering down
   to two projects would stretch them across the full row. auto-fill keeps the
   column tracks, so a tile is the same size whichever filter is active. */
.tiles { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.tile {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	background: var(--ink);
	aspect-ratio: 4 / 5;
	isolation: isolate;
}
.tile--wide { aspect-ratio: 16 / 10; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), opacity 0.5s var(--ease); }
.tile:hover img { transform: scale(1.07); }
.tile__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.25rem, 2.5vw, 1.9rem);
	background: linear-gradient(to top, rgba(26, 33, 29, 0.88) 0%, rgba(26, 33, 29, 0.25) 45%, transparent 75%);
	color: var(--cream);
}
.tile__cat { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-light, #8ca290); margin-bottom: 0.4rem; }
.tile__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--cream); margin: 0; line-height: 1.15; }

/* Filter bar */

/* The `hidden` attribute is honoured by a UA rule (`[hidden]{display:none}`),
   but ANY author `display` declaration beats the UA stylesheet — `.tile` sets
   `display:block`, so filtered tiles kept rendering. This author-level rule
   (0,0,2,0) restores the intended behaviour. */
[data-filter-item][hidden] { display: none !important; }

/* Remaining tiles fade back in so filtering does not snap. */
.is-filtering { animation: casadeco-filter-in 0.45s var(--ease) both; }
@keyframes casadeco-filter-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.is-filtering { animation: none; }
}

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filters button {
	padding: 0.6rem 1.35rem;
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	color: var(--ink-60);
	transition: all 0.3s var(--ease);
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.checklist li {
	position: relative;
	padding-left: 1.9rem;
	font-size: 0.95rem;
	color: var(--ink-60);
	line-height: 1.5;
}
.checklist li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.45em;
	width: 8px; height: 8px;
	border-right: 1.5px solid var(--sage);
	border-bottom: 1.5px solid var(--sage);
	transform: rotate(45deg);
}
.section--ink .checklist li { color: rgba(237, 240, 236, 0.75); }

/* Materials list where each entry carries its own note. Uses the same tick
   marker as .checklist so the two variants read as one family. */
.optlist { margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.optlist dt {
	position: relative;
	padding-left: 1.9rem;
	font-family: var(--font-display);
	font-size: var(--step-1);
	color: var(--ink);
}
.optlist dt::before {
	content: '';
	position: absolute;
	left: 0; top: 0.5em;
	width: 8px; height: 8px;
	border-right: 1.5px solid var(--sage);
	border-bottom: 1.5px solid var(--sage);
	transform: rotate(45deg);
}
.optlist dd { margin: 0.3rem 0 0 1.9rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-60); }
.section--ink .optlist dt { color: var(--cream); }
.section--ink .optlist dd { color: rgba(237, 240, 236, 0.7); }

/* Why Choose, points variant: a second intro paragraph and the label above the
   list. Both centred to match the section head, and held to the same measure
   so the copy does not run the full column width. */
.why__body {
	max-width: 46rem;
	margin: -1.5rem auto clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
	color: var(--ink-60);
	text-wrap: balance;
}
.section--ink .why__body { color: rgba(237, 240, 236, 0.78); }
.why__label {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 1.75rem;
}

/* Pill list */
.pills { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.pills li {
	padding: 0.5rem 1.1rem;
	font-size: 0.82rem;
	color: var(--ink-60);
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 999px;
}
.section--sand .pills li { background: var(--cream); }
.section--ink .pills li { background: rgba(237, 240, 236, 0.05); border-color: var(--line-inv); color: rgba(237, 240, 236, 0.78); }

/* Service areas map ------------------------------------------------------ */
.areas {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	align-items: center;
}
.areas__map { min-width: 0; }
.areas__subtitle {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}
.areas__note { font-size: 0.95rem; margin: 1.75rem 0 2rem; }
.section--ink .areas__note { color: rgba(237, 240, 236, 0.7); }

.uae-map { width: 100%; }
.uae-map__svg { width: 100%; height: auto; overflow: visible; }
.uae-map__land {
	transition: filter 0.6s var(--ease);
	filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

.uae-map__dot {
	fill: var(--sage);
	stroke: var(--cream);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	transition: fill 0.3s var(--ease), r 0.3s var(--ease);
}
.uae-map__leader {
	stroke: rgba(107, 127, 110, 0.55);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
/* Labels straddle the dark landmass and the section background, so they carry
   a halo in the opposite tone. Light-section styling is the default; the ink
   section inverts it. Without this the labels are cream-on-cream wherever they
   overhang the coastline on a light background. */
.uae-map__label {
	font-family: var(--font-body);
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 0.04em;
	fill: var(--ink);
	paint-order: stroke;
	stroke: rgba(255, 252, 248, 0.9);
	stroke-width: 4px;
	stroke-linejoin: round;
	transition: fill 0.3s var(--ease);
}
.section--ink .uae-map__label {
	fill: rgba(237, 240, 236, 0.86);
	stroke: rgba(26, 33, 29, 0.85);
}

/* Pulse ring — animates only on the active pin, so it never distracts. */
.uae-map__pulse {
	fill: none;
	stroke: var(--sage);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
.uae-map__pin.is-active .uae-map__pulse { animation: casadeco-ping 1.4s var(--ease) infinite; }
.uae-map__pin.is-active .uae-map__dot { fill: var(--sage-deep); }
.uae-map__pin.is-active .uae-map__label { fill: var(--sage-deep); }
.section--ink .uae-map__pin.is-active .uae-map__dot,
.section--ink .uae-map__pin.is-active .uae-map__label { fill: var(--cream); }

@keyframes casadeco-ping {
	0%   { opacity: 0.9; transform: scale(1); }
	70%  { opacity: 0;   transform: scale(3.2); }
	100% { opacity: 0;   transform: scale(3.2); }
}
@media (prefers-reduced-motion: reduce) {
	.uae-map__pin.is-active .uae-map__pulse { animation: none; opacity: 0.5; }
}

/* Interactive legend pills.
   The <li> must be stripped bare so only the <button> paints the pill —
   otherwise the li's square background shows behind the rounded button. The
   `.section--ink` selector is repeated because `.section--ink .pills li` would
   otherwise out-rank a plain `.pills--interactive li` reset on background. */
.pills--interactive li,
.section--ink .pills--interactive li,
.section--sand .pills--interactive li {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
/* Light-section styling is the default so the component is safe to drop on any
   background; .section--ink inverts it. Previously these were cream-on-cream
   and vanished entirely wherever the section was not dark. */
.pills--interactive button {
	padding: 0.5rem 1.1rem;
	font-size: 0.82rem;
	color: var(--ink-60);
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.3s var(--ease);
}
/* Active state is identical on both backgrounds: cream on sage-deep clears
   AA, where ink on sage-deep would not. */
.pills--interactive button:hover,
.pills--interactive button.is-active {
	background: var(--sage-deep);
	border-color: var(--sage-deep);
	color: var(--cream);
}

.section--ink .pills--interactive button {
	color: rgba(237, 240, 236, 0.78);
	background: rgba(237, 240, 236, 0.05);
	border-color: var(--line-inv);
}
/* Repeated rather than inherited: the resting rule above is 0,0,3,1 and would
   otherwise outrank the plain `.pills--interactive button.is-active` at
   0,0,2,1, leaving the active pill visually unchanged on dark sections. */
.section--ink .pills--interactive button:hover,
.section--ink .pills--interactive button.is-active {
	background: var(--sage-deep);
	border-color: var(--sage-deep);
	color: var(--cream);
}

@media (max-width: 900px) {
	.areas { grid-template-columns: 1fr; }
	.areas__aside { text-align: center; }
	.areas__aside .pills { justify-content: center; }
	.areas__aside .btn-row { justify-content: center; }
}

.areas__hint {
	display: none;
	margin-top: 1rem;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--muted);
}
.section--ink .areas__hint { color: rgba(237, 240, 236, 0.55); }

/* Below ~640px the map renders under 400px wide. Sharjah, Ajman and Umm Al
   Quwain sit within a few kilometres of each other, so their labels collide at
   any legible size. Drop the labels and let the pill legend name the pins —
   tapping a pill still pulses its location. */
@media (max-width: 639px) {
	.uae-map__label,
	.uae-map__leader { display: none; }
	.uae-map__dot { r: 11; stroke-width: 2.5; }
	.areas__hint { display: block; }
}

/* Testimonials */
.quotes { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.quote {
	position: relative;
	padding: clamp(2rem, 3.5vw, 2.75rem);
	background: var(--cream);
	border: 1px solid var(--line-soft);
}
.section--ink .quote { background: rgba(237, 240, 236, 0.04); border-color: var(--line-inv); }
.quote::before {
	content: '\201C';
	font-family: var(--font-display);
	font-size: 5rem;
	line-height: 1;
	color: var(--sage);
	opacity: 0.35;
	position: absolute;
	top: 0.6rem; left: 1.4rem;
}
.quote p {
	position: relative;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-style: italic;
	line-height: 1.5;
	color: var(--ink);
	margin-bottom: 1.25rem;
}
.section--ink .quote p { color: var(--cream); }
.quote cite { font-style: normal; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* --- Google reviews ----------------------------------------------------- */
.reviews__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	font-size: 0.9rem;
	color: var(--ink-60);
	font-variant-numeric: lining-nums tabular-nums;
}

/* Reviews carry prose rather than an image, so they need more width than the
   service cards to avoid becoming tall, narrow columns of text. */
.hscroll--reviews .hscroll__track > .review { flex: 0 0 clamp(17rem, 82vw, 23rem); }

.review {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: var(--cream);
	border: 1px solid var(--line-soft);
}
.section--ink .review { background: rgba(237, 240, 236, 0.04); border-color: var(--line-inv); }
.section--sand .review { background: var(--cream); }

.review p {
	margin: 0;
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--ink-80, var(--ink));
}
.section--ink .review p { color: rgba(237, 240, 236, 0.82); }

.review__by { display: flex; align-items: center; gap: 0.7rem; }
.review__by cite {
	display: block;
	font-style: normal;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}
.section--ink .review__by cite { color: var(--cream); }
.review__when { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; }

.review__avatar {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--sand-deep);
}
.review__avatar--initial {
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--sage-deep);
}

/* Stars. Decorative — the rating is stated in words next to them. */
.stars { display: inline-flex; gap: 2px; }
.stars .star { fill: var(--sand-deep); }
.stars .star--on { fill: #d9a441; }        /* Google's own star colour */
.section--ink .stars .star { fill: rgba(237, 240, 236, 0.18); }

.reviews__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 3.5rem;
}
.reviews__attrib {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Logo strip */
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 10rem), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logo-cell {
	background: var(--cream);
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 3vw, 2.25rem) 1rem;
	font-family: var(--font-display);
	font-size: 1.15rem;
	letter-spacing: 0.12em;
	color: var(--muted);
	text-transform: uppercase;
	transition: color 0.35s var(--ease), background 0.35s var(--ease);
}
.logo-cell:hover { color: var(--sage-deep); background: var(--sand); }

/* Accordion / FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: var(--step-1);
	color: var(--ink);
	transition: color 0.3s var(--ease);
}
.faq__q:hover { color: var(--sage-deep); }
.faq__icon { position: relative; flex: none; width: 16px; height: 16px; margin-top: 0.5rem; }
.faq__icon::before,
.faq__icon::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: var(--sage);
	transition: transform 0.35s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded='true'] .faq__icon::after { transform: rotate(0deg); }
.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var(--ease);
}
.faq__q[aria-expanded='true'] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.6rem; color: var(--ink-60); max-width: 62ch; margin: 0; }

/* CTA band */
.cta-band {
	position: relative;
	padding-block: clamp(4rem, 8vw, 7rem);
	background: var(--ink);
	color: var(--cream);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
.cta-band__bg { position: absolute; inset: 0; z-index: -2; opacity: 0.28; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
	content: '';
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(70% 100% at 50% 50%, rgba(26, 33, 29, 0.55), rgba(26, 33, 29, 0.94));
}
/* No 20ch cap: it forced every closing heading onto two lines even though the
   longest of them needs 1107px of the 1184px column. `balance` is kept so the
   few that still wrap at narrow widths split evenly. The paragraph below keeps
   its own 46rem measure. */
.cta-band h2 { color: var(--cream); max-width: none; margin-inline: auto; text-wrap: balance; }
.cta-band p { max-width: 46rem; margin-inline: auto; color: rgba(237, 240, 236, 0.76); font-size: var(--step-1); font-weight: 300; margin-bottom: 2rem; }

/* Forms */
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field input,
.field select,
.field textarea {
	padding: 0.9rem 1rem;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 0.95rem;
	color: var(--ink);
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--sage);
	box-shadow: 0 0 0 3px var(--sage-tint);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-note { font-size: 0.8rem; color: var(--muted); }

.alert { padding: 1rem 1.25rem; border-left: 3px solid; margin-bottom: 1.5rem; font-size: 0.92rem; }
.alert--ok { border-color: #4a7c59; background: rgba(74, 124, 89, 0.08); color: #2f5138; }
.alert--err { border-color: #a3402f; background: rgba(163, 64, 47, 0.08); color: #7d3123; }

/* Contact detail rows */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.contact-list li { display: flex; gap: 1.1rem; align-items: flex-start; }
.contact-list__icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--sage); border-radius: 50%; color: var(--sage-deep); }
.contact-list__label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.contact-list a { text-decoration: none; color: var(--ink); font-size: 1.02rem; transition: color 0.25s var(--ease); }
.contact-list a:hover { color: var(--sage-deep); }

/* Sticky in-page nav on service pages */
.subnav {
	position: sticky;
	top: var(--header-h);
	z-index: 40;
	background: rgba(255, 252, 248, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line-soft);
}
.subnav__list {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a {
	display: block;
	padding: 1.05rem 0;
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--muted);
	border-bottom: 2px solid transparent;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.subnav__list a:hover,
.subnav__list a.is-active { color: var(--ink); border-color: var(--sage); }

/* Blog */
.post-card { display: flex; flex-direction: column; text-decoration: none; }
.post-card__media { overflow: hidden; aspect-ratio: 3 / 2; background: var(--sand-deep); margin-bottom: 1.25rem; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__meta { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 0.6rem; }
.post-card h3 { font-size: var(--step-2); margin-bottom: 0.5rem; transition: color 0.3s var(--ease); }
.post-card:hover h3 { color: var(--sage-deep); }
.post-card p { font-size: 0.93rem; color: var(--ink-60); margin: 0; }

.entry-content { max-width: var(--max-narrow); }
.entry-content > * { margin-bottom: 1.3em; }
.entry-content h2 { font-size: var(--step-2); margin-top: 2em; }
.entry-content h3 { font-size: var(--step-1); margin-top: 1.6em; }
.entry-content ul,
.entry-content ol { padding-left: 1.4rem; }
.entry-content li { margin-bottom: 0.5em; }
.entry-content blockquote {
	margin: 2em 0;
	padding-left: 1.6rem;
	border-left: 2px solid var(--sage);
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-style: italic;
	color: var(--ink);
}
.entry-content img { margin-block: 2em; }
.entry-content a { color: var(--sage-deep); }

.pagination { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 3.5rem; }
.pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 44px; height: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--line);
	text-decoration: none;
	font-size: 0.85rem;
	color: var(--ink-60);
	transition: all 0.3s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* Floating WhatsApp */
.whatsapp-float {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	width: 54px; height: 54px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 8px 28px rgba(37, 211, 102, 0.42);
	transition: transform 0.35s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }

/* 10. Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(237, 240, 236, 0.66); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.site-footer h2,
.site-footer h3 { color: var(--cream); }
.footer__top { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding-bottom: 3.5rem; }
.footer__brand { grid-column: span 1; max-width: 24rem; }
.footer__brand .brand__name { color: var(--cream); }
.footer__brand .brand__tag { color: rgba(237, 240, 236, 0.55); }
.footer__brand p { margin-top: 1.25rem; font-size: 0.93rem; line-height: 1.65; }
.footer__col h3 { font-size: 0.78rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); margin-bottom: 1.35rem; }
/* Sits between the column heading and the contact list, so it needs its own
   spacing — the list below supplies none of its own. */
.footer__pitch {
	margin: -0.35rem 0 1.35rem;
	font-size: 0.9rem;
	line-height: 1.65;
	color: rgba(237, 240, 236, 0.66);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer__col a { text-decoration: none; font-size: 0.92rem; color: rgba(237, 240, 236, 0.66); transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); }
.footer__col a:hover { color: var(--sage-light); padding-left: 0.3rem; }
.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.75rem;
	border-top: 1px solid var(--line-inv);
	font-size: 0.82rem;
}
.footer__bottom ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.socials { display: flex; gap: 0.6rem; margin-top: 1.75rem; }
.socials a {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--line-inv);
	border-radius: 50%;
	color: rgba(237, 240, 236, 0.7);
	transition: all 0.3s var(--ease);
}
.socials a:hover { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--cream); }

.map-embed { aspect-ratio: 16 / 7; background: var(--sand-deep); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); transition: filter 0.5s var(--ease); }
.map-embed:hover iframe { filter: none; }

/* =========================================================================
   11. Motion
   Everything here is transform/opacity only, so it composites on the GPU and
   never triggers layout. The whole block is disabled under
   prefers-reduced-motion at the end of the file.
   ========================================================================= */

/* --- Hero: slow Ken Burns drift on the banner --------------------------- */
.hero__media img,
.page-hero__media img {
	animation: casadeco-kenburns 24s var(--ease) forwards;
	transform-origin: 55% 45%;
}
/* Parallax is applied to the wrapper, never the image: the image already owns
   `transform` for the Ken Burns drift and the two would overwrite each other. */
.hero__media { will-change: transform; }
@keyframes casadeco-kenburns {
	from { transform: scale(1.005); }
	to   { transform: scale(1.09); }
}

/* --- Hero: curtain reveal ----------------------------------------------- */
.hero__curtain {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
}
.hero__curtain-panel {
	position: absolute;
	top: -2%;
	height: 104%;
	width: 51%;
	background: var(--veil);
	will-change: transform;
}
.hero__curtain-panel--l { left: 0;  transform-origin: left center; }
.hero__curtain-panel--r { right: 0; transform-origin: right center; }

/* A soft inner edge so the panels read as fabric rather than flat blocks. */
.hero__curtain-panel::after {
	content: '';
	position: absolute;
	top: 0;
	width: 34px;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(26, 33, 29, 0.28));
}
.hero__curtain-panel--l::after { right: 0; }
.hero__curtain-panel--r::after { left: 0; transform: scaleX(-1); }

.hero__curtain-panel--l { animation: casadeco-part-l 1.25s cubic-bezier(0.76, 0, 0.24, 1) 0.1s forwards; }
.hero__curtain-panel--r { animation: casadeco-part-r 1.25s cubic-bezier(0.76, 0, 0.24, 1) 0.1s forwards; }

@media (min-width: 901px) {
	.hero__curtain-panel {
		backdrop-filter: blur(7px) saturate(1.08);
		-webkit-backdrop-filter: blur(7px) saturate(1.08);
	}
}

@keyframes casadeco-part-l {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-101%, 0, 0); }
}
@keyframes casadeco-part-r {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(101%, 0, 0); }
}

/* Returning within the session: skip straight past the reveal. */
.curtain-seen .hero__curtain { display: none; }

/* --- Hero: staggered entrance on load ----------------------------------- */
.hero__inner > * {
	opacity: 0;
	animation: casadeco-rise 1.1s var(--ease) forwards;
}
.hero__inner > .eyebrow  { animation-delay: 0.5s; }
.hero__inner > p         { animation-delay: 1.05s; }
.hero__inner > .btn-row  { animation-delay: 1.2s; }

@keyframes casadeco-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

/* The headline rises word by word out of a mask, behind the parting curtain.
   Each word carries its own --word-delay, written server-side. */
.hero__title { opacity: 1; animation: none; }
.hero__title .word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.06em;
}
.hero__title .word > span {
	display: inline-block;
	transform: translateY(110%);
	animation: casadeco-word 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
	animation-delay: var(--word-delay, 0s);
}
@keyframes casadeco-word {
	to { transform: translateY(0); }
}

.curtain-seen .hero__inner > .eyebrow { animation-delay: 0.1s; }
.curtain-seen .hero__inner > p        { animation-delay: 0.45s; }
.curtain-seen .hero__inner > .btn-row { animation-delay: 0.6s; }
.curtain-seen .hero__title .word > span { animation-delay: calc(var(--word-delay, 0s) - 0.4s); }

.hero__scroll {
	opacity: 0;
	animation: casadeco-fade 1.2s var(--ease) 1.1s forwards;
}
.hero__scroll::after { animation: casadeco-scroll-line 2.6s var(--ease) infinite; }
@keyframes casadeco-fade { to { opacity: 1; } }
@keyframes casadeco-scroll-line {
	0%   { transform: scaleY(0.25); transform-origin: top; opacity: 0.3; }
	45%  { transform: scaleY(1);    transform-origin: top; opacity: 1; }
	46%  { transform: scaleY(1);    transform-origin: bottom; }
	100% { transform: scaleY(0);    transform-origin: bottom; opacity: 0.3; }
}

/* --- Scroll progress ---------------------------------------------------- */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	z-index: 200;
	transform: scaleX(var(--progress, 0));
	transform-origin: left center;
	background: var(--sage);
	pointer-events: none;
}

/* --- Directional reveals ------------------------------------------------ */
/* Only meaningful where the split is genuinely two columns. Below that the
   panels stack, a sideways entrance reads as a glitch, and the pre-reveal
   offset pushes content past the viewport edge. */
@media (min-width: 901px) {
	.reveal--left  { transform: translate3d(-38px, 0, 0); }
	.reveal--right { transform: translate3d(38px, 0, 0); }
	.reveal--left.is-visible,
	.reveal--right.is-visible { transform: none; }
}

/* --- Curtain wipe on imagery -------------------------------------------- */
/* Two panels part, echoing the hero curtain so every image reveal on the site
   reads as the same gesture. */
.media-wipe { position: relative; overflow: hidden; }
.media-wipe::before,
.media-wipe::after {
	content: '';
	position: absolute;
	top: 0;
	z-index: 2;
	width: 50.5%;
	height: 100%;
	background: var(--veil-flat);
	transition: transform 1s var(--ease);
	transition-delay: 0.1s;
}
.media-wipe::before { left: 0; }
.media-wipe::after  { right: 0; }
.media-wipe.is-visible::before { transform: translate3d(-101%, 0, 0); }
.media-wipe.is-visible::after  { transform: translate3d(101%, 0, 0); }
/* Deliberately no transform on .media-wipe img: .tile:hover img and
   .card:hover .card__media img already own that property, and a rule here
   would win on source order and kill the hover zoom. The curtain alone
   carries the entrance. */

/* --- Stat counters ------------------------------------------------------ */
.stat__num { font-variant-numeric: lining-nums tabular-nums; }
.stat { transition: background 0.4s var(--ease); }
.stat:hover { background: var(--sand-deep); }
.section--ink .stat:hover { background: rgba(237, 240, 236, 0.06); }

/* --- Button shine ------------------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
	content: '';
	position: absolute;
	inset: 0 auto 0 -60%;
	z-index: -1;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
	transform: skewX(-18deg);
	transition: left 0.7s var(--ease);
}
.btn:hover::after { left: 115%; }

/* --- Service card: sage underline sweep --------------------------------- */
.card__body { position: relative; }
.card__body::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--sage);
	transition: width 0.55s var(--ease);
}
.card:hover .card__body::before { width: 100%; }

/* --- Tiles: caption lift ------------------------------------------------ */
.tile__overlay > * {
	transform: translateY(6px);
	opacity: 0.92;
	transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.tile:hover .tile__overlay > * { transform: none; opacity: 1; }
.tile:hover .tile__overlay > .tile__cat { transition-delay: 0.05s; }

/* --- Section heading underline ------------------------------------------ */
.eyebrow::before { transition: width 0.8s var(--ease); }
.reveal .eyebrow::before,
.section__head.reveal .eyebrow::before { width: 0; }
.section__head.reveal.is-visible .eyebrow::before { width: 2rem; }

/* --- Respect the user's motion preference ------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hero__media img,
	.page-hero__media img,
	.hero__inner > *,
	.hero__scroll,
	.hero__scroll::after {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
	.hero__curtain { display: none; }
	.hero__title .word > span { transform: none; animation: none; }
	.scroll-progress { display: none; }
	.media-wipe::before,
	.media-wipe::after { display: none; }
	.media-wipe img { transform: none; }
	.reveal--left,
	.reveal--right { transform: none; }
	.section__head.reveal .eyebrow::before { width: 2rem; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1023px) {
	.nav-toggle { display: flex; }

	/* The CTA lives inside .nav, so it rides into the drawer rather than being
	   dropped — the primary conversion path stays reachable on mobile. */
	.header__cta {
		display: flex;
		width: 100%;
		margin-top: 2rem;
	}

	/* backdrop-filter establishes a containing block for position:fixed
	   descendants, which would resolve the drawer's inset against the 84px
	   header instead of the viewport and collapse it to a sliver. The header
	   is fully opaque once stuck, so drop the filter here and paint it solid. */
	.site-header.is-stuck,
	body.has-solid-header .site-header {
		background: var(--cream);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	/* The closed panel must never sit outside the viewport: a position:fixed
	   element is laid out against the initial containing block, so a
	   translateX(100%) here would add a viewport-width of horizontal scroll
	   that `body { overflow-x: hidden }` cannot clip. Fading with a small
	   vertical offset gives the same reveal with zero overflow. */
	.nav {
		position: fixed;
		inset: var(--header-h) 0 0;
		display: block;
		padding: 2rem var(--gutter) 3rem;
		background: var(--cream);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
	}
	.nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__item { border-bottom: 1px solid var(--line-soft); }
	.nav__link { display: block; padding: 1.05rem 0; font-size: 0.95rem; color: var(--ink) !important; }
	.nav__link::after { display: none; }

	/* Tapping a parent expands its submenu instead of navigating, so it needs a
	   visible affordance. Re-anchor the caret to the row and rotate it open. */
	.nav__item--has-children > .nav__link {
		position: relative;
		padding-right: 2rem;
	}
	.nav__item--has-children > .nav__link::before {
		display: block;
		left: auto;
		right: 0.4rem;
		top: 50%;
		width: 7px;
		height: 7px;
		opacity: 0.75;
		transform: translateY(-70%) rotate(45deg);
		transition: transform 0.3s var(--ease);
	}
	.nav__item--has-children.is-open > .nav__link::before {
		transform: translateY(-25%) rotate(-135deg);
	}
	.nav__sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		background: transparent;
		min-width: 0;
		padding: 0 0 0.9rem 1rem;
		display: none;
	}
	.nav__item--has-children.is-open .nav__sub { display: block; }
	.nav__sub a { padding: 0.55rem 0; }
	.nav__sub a:hover { background: none; padding-left: 0.3rem; }
	body.nav-open { overflow: hidden; }
	.split--reverse .split__media { order: 0; }
	.hero__scroll { display: none; }
}

@media (max-width: 600px) {
	:root { --header-h: 70px; }
	.footer__bottom { flex-direction: column; align-items: flex-start; }
	.framed::before { display: none; }
}

@media print {
	.site-header, .site-footer, .whatsapp-float, .cta-band, .subnav { display: none !important; }
	body { color: #000; background: #fff; }
}