/* =====================================================================
   Jindal Electronics & Furniture House

   Design system generated with ui-ux-pro-max:
     Product   — "Home Decoration & Interior Design", whose stated colour
                 strategy is "neutral base + material texture accent".
     Palette   — Soft pastels on a warm off-white shell. Colour sits in
                 section backgrounds (lavender, peach, sand); type stays
                 near-black. Generous rounding, pill controls.
     Type      — "Modern Professional": Poppins headings, Open Sans body.
     Structure — Trust & Authority: hero, proof, catalogue, clear CTA path.

   HOUSE RULE: no gradients anywhere. Every fill is one solid colour.
   Depth comes from a soft neutral shadow scale and borders, not colour blends.
   Motion lives in section 19; everything there is disabled under
   prefers-reduced-motion.
   ===================================================================== */

/* ---------- 1. Semantic tokens ---------- */
:root {
	/* Core palette — soft pastels on a warm off-white shell.
	   Colour lives in section BACKGROUNDS (lavender, peach, sand), never
	   in the type: headings and body stay near-black, so the page reads
	   calm and the product photos supply the saturation.
	   Action colour is a single deep ink, used on buttons and links. */
	--primary:        #1B1B1F;   /* near-black, structure and buttons */
	--primary-fg:     #FFFFFF;
	--primary-dark:   #000000;
	--primary-soft:   #EFEDF9;

	--accent:         #1B1B1F;   /* actions match the ink: quiet, not loud */
	--accent-fg:      #FFFFFF;
	--accent-dark:    #000000;
	--accent-soft:    #E5DEF7;   /* lavender tint behind eyebrows */
	--accent-bright:  #C9B8F0;   /* lavender, for use on the dark band */

	/* Pastel section fills — the actual personality of the page. */
	--lavender:       #E5DEF7;
	--lavender-deep:  #C9B8F0;
	--peach:          #F5C4A8;
	--peach-soft:     #FBE6DA;
	--sand:           #E8E1D9;

	--bg:             #F0EDEB;   /* warm off-white shell */
	--fg:             #1B1B1F;   /* near-black text */
	--card:           #FFFFFF;
	--card-fg:        #1B1B1F;

	--muted:          #FFFFFF;   /* white blocks alternate with the shell */
	--muted-fg:       #5C5C66;
	--border:         #E6E2DF;
	--border-strong:  #D5D0CB;

	--ink-deep:       #1B1B1F;   /* near-black band */

	--destructive:    #DC2626;
	--success:        #15803D;
	--wa:             #1FA855;
	--wa-dark:        #17853F;

	/* Type */
	--font-head:      'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:      'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Type scale: 12 14 16 18 24 32 (per the skill's font-scale rule) */
	--fs-xs:   0.75rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-lg:   1.125rem;
	--fs-xl:   1.5rem;
	--fs-2xl:  2rem;

	/* 4/8 spacing rhythm */
	--sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
	--sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem;
	--sp-12: 3rem;  --sp-16: 4rem;  --sp-20: 5rem;  --sp-24: 6rem;

	--radius-sm: 10px;
	--radius:    20px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	/* Neutral shadow scale, consistent everywhere. Never coloured. */
	--shadow-sm: 0 1px 2px rgba(27,27,31,.05);
	--shadow:    0 2px 8px rgba(27,27,31,.06);
	--shadow-md: 0 8px 20px rgba(27,27,31,.09);

	--wrap: 1180px;
	--gutter: clamp(1.15rem, 4vw, 2.5rem);
	--header-h: 72px;

	/* Motion: 150-300ms per the skill's duration rule */
	--t-fast: 150ms;
	--t: 220ms;
	--ease: cubic-bezier(.4, 0, .2, 1);

	--z-header: 100;
	--z-float: 90;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--fg);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Type stays near-black throughout. The pastels do the talking. */
h1, h2, h3, h4 {
	font-family: var(--font-head);
	color: var(--fg);
	line-height: 1.2;
	letter-spacing: -.02em;
	font-weight: 600;
	margin: 0 0 var(--sp-4);
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-dark); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent); }

ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }

/* Images are wrapped in <picture> for the WebP source. The wrapper is inline
   by default, which would break every img sizing rule below it, so make it
   behave like the image it contains. */
picture { display: block; width: 100%; height: 100%; }
address { font-style: normal; }
button { font: inherit; cursor: pointer; }

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--fg); color: #fff; padding: var(--sp-3) var(--sp-5);
	font-weight: 600; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.ico { width: 24px; height: 24px; flex: 0 0 auto; }
.ico--sm { width: 18px; height: 18px; }

/* ---------- 3. Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: 48px;
	padding: var(--sp-3) var(--sp-6);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--fs-base);
	line-height: 1.2;
	text-align: center;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--t) var(--ease), color var(--t) var(--ease),
	            border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-fg); box-shadow: var(--shadow); }

.btn--solid { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.btn--solid:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--primary-fg); }

.btn--outline { background: var(--card); border-color: var(--border-strong); color: var(--fg); }
.btn--outline:hover { border-color: var(--primary); background: var(--muted); color: var(--fg); }

.btn--light { background: #fff; border-color: #fff; color: var(--ink-deep); }
.btn--light:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); }

.btn--wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); color: #fff; }

.btn--lg { min-height: 54px; padding: var(--sp-4) var(--sp-8); font-size: var(--fs-lg); }
.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn__spin {
	display: none; width: 17px; height: 17px;
	border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
	border-radius: 50%; animation: spin .7s linear infinite;
}
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading .btn__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 4. Section furniture ---------- */
.sec { padding-block: clamp(3.5rem, 8vw, 6rem); }
.sec--card { background: var(--card); }
.sec--muted { background: var(--muted); }
.sec--deep { background: var(--ink-deep); color: rgba(255,255,255,.78); }
.sec--deep h2, .sec--deep h3 { color: #fff; }

/* Pastel section fills. Used sparingly so the page has rhythm without
   turning into a colour chart: one peach block, one sand block. */
.sec--peach { background: var(--peach-soft); }
.sec--sand  { background: var(--sand); }

/* Sections that sit on the shell get a rounded card treatment, matching
   the hero panel, instead of running edge to edge. */
.sec--panel > .wrap {
	background: var(--card);
	border-radius: var(--radius-lg);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.eyebrow {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	font-family: var(--font-head);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-dark);
	background: var(--accent-soft);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-pill);
	margin-bottom: var(--sp-4);
}
.eyebrow--solid { color: var(--primary-dark); background: var(--primary-soft); }
.eyebrow--ondeep { color: var(--accent-bright); background: rgba(255,255,255,.08); }

.sec-head { max-width: 680px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.sec-head--left { margin-inline: 0; text-align: left; }
.sec-title { font-size: clamp(1.75rem, 4vw, 2.6rem); margin-bottom: var(--sp-4); }
.sec-lede { font-size: var(--fs-lg); color: var(--muted-fg); max-width: 62ch; margin-inline: auto; }
.sec-head--left .sec-lede { margin-inline: 0; }
.sec--deep .sec-lede { color: rgba(255,255,255,.72); }

/* ---------- 5. Topbar + header ---------- */
.topbar { background: var(--ink-deep); color: rgba(255,255,255,.75); font-size: var(--fs-sm); }
.topbar__in { display: flex; align-items: center; gap: var(--sp-6); min-height: 40px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar__item .ico { color: var(--accent); }
.topbar__phone { margin-left: auto; color: #fff; font-weight: 600; }
.topbar__phone:hover { color: var(--accent-bright); }

.site-header {
	position: sticky; top: 0; z-index: var(--z-header);
	background: var(--card);
	border-bottom: 1px solid var(--border);
	transition: box-shadow var(--t) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }
.site-header__in { display: flex; align-items: center; gap: var(--sp-6); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--fg); }
.brand__mark {
	display: grid; place-items: center;
	width: 42px; height: 42px; flex: 0 0 auto;
	background: var(--ink-deep);
	color: #FFFFFF;
	font-family: var(--font-head); font-weight: 600; font-size: 1.25rem;
	border-radius: 50%;              /* circular mark, as in the reference */
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--fg); letter-spacing: -.02em; }
.brand__sub { font-size: var(--fs-xs); color: var(--muted-fg); white-space: nowrap; }
/* The shop name must not wrap into three lines when the nav gets crowded. */
.brand { flex: 0 0 auto; }
.brand__name { white-space: nowrap; }
.site-header__cta { white-space: nowrap; flex: 0 0 auto; }
/* The logo carries a second line of type under the name, so at 50px that
   subtitle rendered too small to read. 58px is what makes it legible while
   still fitting the 73px header. */
.custom-logo-link { display: block; flex: 0 0 auto; line-height: 0; }
.custom-logo-link img { max-height: 58px; width: auto; }
@media (max-width: 420px) {
	/* Narrow phones: the header also holds the Custom Made button. */
	.custom-logo-link img { max-height: 44px; }
}

/* Each nav item is its own pill, as in the reference. */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--sp-2); }
.nav__list a {
	display: block; padding: var(--sp-3) var(--sp-4);
	/* Seven destinations sit in this bar. Without this the two-word labels
	   ("Custom Made", "Easy EMI") wrap to a second line and the pills stop
	   looking like a row. */
	white-space: nowrap;
	font-family: var(--font-head); font-weight: 500; font-size: .93rem;
	color: var(--fg);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
	            border-color var(--t-fast) var(--ease);
}
.nav__list a:hover, .nav__list .current-menu-item > a {
	color: #fff; background: var(--ink-deep); border-color: var(--ink-deep);
}

.nav-toggle {
	display: none; align-items: center; justify-content: center;
	width: 48px; height: 48px; margin-left: auto;
	background: var(--card); border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm); color: var(--fg);
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ---------- 6. Hero ----------
   A single lavender panel floating on the shell, as in the reference:
   text on the left, photography bleeding to the right edge. */
.hero { background: var(--bg); padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }

.hero__in {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	background: var(--lavender);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 4vw, 3.5rem);
	overflow: hidden;
}

/* --- Ambient inside the hero panel ---
   The section-level blobs sit behind the panel and are mostly clipped by it,
   so the panel gets its own layer: slow-drifting tinted circles plus a
   sweeping sheen. Both are transform/opacity only. */
.hero__in::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	will-change: transform;
}
/* The warm peach circle that used to sit bottom-left is gone. It read as a
   stray colour against the lavender panel rather than as depth, which is the
   only thing a decorative shape is there to add. The white circle below stays
   because it lightens the panel rather than introducing a second hue. */
/* Cool circle, top-right, behind the photo */
.hero__in::after {
	width: 300px; height: 300px;
	top: -120px; right: 22%;
	background: #FFFFFF;
	opacity: .35;
	animation: hero-orb-b 30s var(--ease) infinite alternate;
}
.hero__in > * { position: relative; z-index: 1; }

@keyframes hero-orb-b {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-60px, 60px, 0) scale(1.14); }
}

/* A slow sheen that crosses the panel, like light moving through a showroom. */
.hero__sheen {
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none; overflow: hidden;
	border-radius: inherit;
}
.hero__sheen::before {
	content: "";
	position: absolute; top: -50%; bottom: -50%;
	left: -30%; width: 22%;
	background: #FFFFFF;
	opacity: .22;
	transform: skewX(-14deg) translate3d(0, 0, 0);
	animation: hero-sheen 9s var(--ease) infinite;
	will-change: transform;
}
@keyframes hero-sheen {
	0%       { transform: skewX(-14deg) translate3d(0, 0, 0); }
	55%, 100% { transform: skewX(-14deg) translate3d(600%, 0, 0); }
}

.hero__text { display: flex; flex-direction: column; justify-content: center; }

.hero__title {
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.1;
	margin-bottom: var(--sp-5);
}
/* On lavender the type stays ink; no coloured span. */
.hero__title span { color: inherit; }

/* Slightly darker than --muted-fg so it stays readable on the lavender. */
.hero__lede { font-size: var(--fs-lg); color: #46464F; max-width: 52ch; margin-bottom: var(--sp-8); }
.hero__lede strong { color: var(--fg); font-weight: 600; }

/* The eyebrow reads as a white pill on the lavender panel. */
.hero .eyebrow { background: var(--card); color: var(--fg); }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); }

/* Trust signals: facts, sitting on a hairline rule. */
.hero__facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(27,27,31,.14); }
.hero__fact { flex: 1 1 0; min-width: 120px; padding: var(--sp-5) var(--sp-4) 0 0; }
.hero__fact dt {
	font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 600;
	color: var(--fg); line-height: 1; margin-bottom: var(--sp-1);
	font-variant-numeric: tabular-nums;
}
/* These labels are short on purpose so each sits on one line. The four facts
   share a row, which leaves roughly 115px per cell on a desktop — a label that
   wraps turns a tidy row of figures into a ragged block. nowrap is the guard:
   if a longer label is ever added, it overflows visibly here rather than
   quietly wrapping and going unnoticed. */
.hero__fact dd {
	margin: 0;
	font-size: var(--fs-sm);
	color: #46464F;
	line-height: 1.45;
	white-space: nowrap;
}

/* Hero visual: a real showroom photo above the department summary. */
.hero__visual { display: grid; gap: var(--sp-5); }

.hero__photo {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--muted);
	aspect-ratio: 16 / 10;
	box-shadow: var(--shadow-md);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Department summary card */
.hero__card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}
.hero__card-head {
	padding: var(--sp-5) var(--sp-6);
	background: var(--muted);
	border-bottom: 1px solid var(--border);
	font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg);
}
.hero__list { padding: var(--sp-2) 0; }
.hero__list li {
	display: flex; gap: var(--sp-4); align-items: flex-start;
	padding: var(--sp-4) var(--sp-6);
	transition: background var(--t-fast) var(--ease);
}
.hero__list li + li { border-top: 1px solid var(--border); }
.hero__list li:hover { background: var(--muted); }
.hero__list .ico { color: var(--accent); margin-top: 2px; }
.hero__list strong { display: block; font-family: var(--font-head); font-size: var(--fs-base); font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.hero__list span { display: block; font-size: var(--fs-sm); color: var(--muted-fg); line-height: 1.5; }

/* ---------- 7. Brand strip ---------- */
.brands { background: var(--card); border-block: 1px solid var(--border); padding-block: var(--sp-10); }
.brands__label {
	text-align: center; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: var(--sp-6);
}
.brands__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
.brands__item {
	display: grid; place-items: center;
	min-height: 64px; padding: var(--sp-3);
	background: var(--muted);
	border-radius: var(--radius-sm);
	font-family: var(--font-head); font-weight: 600; font-size: clamp(.9rem, 1.6vw, 1.1rem);
	color: var(--muted-fg);
	transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.brands__item:hover { color: var(--fg); background: var(--primary-soft); }

/* ---------- 8. Product cards ---------- */
.dept__head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dept__count { font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 500; color: var(--muted-fg); white-space: nowrap; padding-bottom: var(--sp-2); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); }

.card {
	display: flex; flex-direction: column;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-3px); }

/* Product photo. aspect-ratio reserves the space so nothing shifts as the
   image loads (Core Web Vitals: CLS). */
.card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--muted);
	overflow: hidden;
}
.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }

/* Small icon chip sitting on the photo, so the product type still reads at a
   glance without relying on the photo alone. */
.card__icon {
	position: absolute; left: var(--sp-3); bottom: var(--sp-3); z-index: 1;
	display: grid; place-items: center;
	width: 40px; height: 40px;
	background: var(--card);
	color: var(--primary-dark);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.card:hover .card__icon { background: var(--accent); color: var(--accent-fg); }
.card__icon .ico { width: 20px; height: 20px; }

.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5) var(--sp-6) var(--sp-6); }

.card__title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card__desc { font-size: .95rem; color: var(--muted-fg); margin-bottom: var(--sp-5); }

.card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.card__tags li {
	font-size: var(--fs-xs); font-weight: 600; color: var(--muted-fg);
	background: var(--muted); padding: 4px var(--sp-3); border-radius: var(--radius-pill);
}

.card__link {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: var(--sp-2);
	font-family: var(--font-head); font-weight: 500; font-size: .93rem;
	color: var(--accent-dark);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--border);
}
.card__link .ico { transition: transform var(--t) var(--ease); }
.card__link:hover .ico { transform: translateX(4px); }

/* Per-department icon accent, so the three sections are distinguishable at a
   glance without changing the card layout. Colour is never the only signal —
   each section also has its own heading, surface and photography. */
.dept--furniture .card__icon { color: var(--primary-dark); }
.dept--furniture .card:hover .card__icon { background: var(--primary); color: var(--primary-fg); }

.dept--electronics .card__icon { color: var(--accent-dark); }
.dept--electronics .card:hover .card__icon { background: var(--accent); color: var(--accent-fg); }

/* Custom furniture cards carry no photograph — there is no stock picture of a
   piece that has not been built yet, and a generic one would be a lie about
   what you are getting. The icon therefore has to leave the absolute position
   it takes when it sits on a photo, or it would overlap the heading. */
/* Four cards in a three-column grid strand the fourth on its own row, so this
   set is explicitly 2x2 — an even split reads as deliberate where 3+1 reads
   as a mistake. */
.dept--custom { grid-template-columns: repeat(2, 1fr); }

.dept--custom .card { padding-top: var(--sp-6); }
.dept--custom .card__icon {
  position: static;
  width: 52px; height: 52px;
  margin: 0 var(--sp-6);
  background: var(--accent-soft);
  color: var(--ink-deep);
}
.dept--custom .card__icon .ico { width: 26px; height: 26px; }
.dept--custom .card:hover .card__icon { background: var(--lavender-deep); color: var(--ink-deep); }
.dept--custom .card__body { padding-top: var(--sp-4); }

/* ---------- 9. Finance band ---------- */
.emi__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.emi__title { font-size: clamp(1.75rem, 4vw, 2.6rem); margin-bottom: var(--sp-4); }
.emi__lede { color: rgba(255,255,255,.75); font-size: var(--fs-lg); max-width: 50ch; margin-bottom: var(--sp-8); }

.emi__partners { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.emi__partner {
	font-family: var(--font-head); font-weight: 500; font-size: .95rem; color: #fff;
	background: rgba(255,255,255,.08);
	padding: var(--sp-2) var(--sp-5);
	border-radius: var(--radius-pill);
}

.emi__box { background: rgba(255,255,255,.05); border-radius: var(--radius); overflow: hidden; }
.emi__box-head {
	padding: var(--sp-4) var(--sp-6);
	border-bottom: 1px solid rgba(255,255,255,.1);
	font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--accent-bright);
}
.emi__item { display: flex; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); }
.emi__item + .emi__item { border-top: 1px solid rgba(255,255,255,.07); }
.emi__item .ico { color: var(--accent); margin-top: 2px; }
.emi__item strong { display: block; font-family: var(--font-head); font-size: var(--fs-base); font-weight: 600; color: #fff; margin-bottom: 1px; }
.emi__item span { font-size: var(--fs-sm); color: rgba(255,255,255,.68); line-height: 1.5; }

/* ---------- 10. Steps ---------- */
/* auto-fit rather than a fixed four, because the how-it-works lists are not
   all the same length — four steps on the EMI page, five on custom furniture.
   A hardcoded four leaves the fifth stranded alone on a second row. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-5); }
.step {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--sp-6);
	box-shadow: var(--shadow-sm);
}
.step__num {
	display: inline-grid; place-items: center;
	width: 40px; height: 40px;
	background: var(--accent-soft); color: var(--accent-dark);
	font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base);
	border-radius: var(--radius-pill);
	margin-bottom: var(--sp-5);
}
.step__title { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.step__desc { font-size: .92rem; color: var(--muted-fg); margin: 0; }

/* ---------- 11. Assurance rows ---------- */
.why__list { border-top: 1px solid var(--border-strong); }
.why__row {
	display: grid; grid-template-columns: 52px 1fr 1.25fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: start;
	padding: clamp(1.5rem, 3vw, 2rem) 0;
	border-bottom: 1px solid var(--border-strong);
	transition: background var(--t) var(--ease);
}
.why__row:hover { background: var(--card); }
.why__icon {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	background: var(--primary-soft); color: var(--primary-dark);
	border-radius: var(--radius-sm);
}
.why__title { font-size: var(--fs-lg); margin: 0; }
.why__desc { font-size: .96rem; color: var(--muted-fg); margin: 0; }

/* ---------- 12. Enquiry ---------- */
.contact__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.form {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--shadow);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

.field { margin-bottom: var(--sp-5); }
.field label {
	display: block; margin-bottom: var(--sp-2);
	font-family: var(--font-head); font-weight: 500; font-size: .9rem; color: var(--fg);
}
.field .req { color: var(--accent-dark); }
.field .opt { color: var(--muted-fg); font-weight: 400; }

.field input, .field select, .field textarea {
	width: 100%; min-height: 48px;
	padding: var(--sp-3) var(--sp-4);
	font-family: var(--font-body); font-size: var(--fs-base); color: var(--fg);
	background: var(--card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field select {
	appearance: none; cursor: pointer; padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right var(--sp-4) center; background-size: 17px;
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(217,119,6,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #A9AFB9; }

.field__hint { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted-fg); }
.field__error { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--destructive); }
.field.has-error input, .field.has-error select, .field.has-error textarea {
	border-color: var(--destructive); box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin: var(--sp-4) 0 0; font-size: .95rem; font-weight: 600; text-align: center; }
.form__status.is-ok { color: var(--success); }
.form__status.is-err { color: var(--destructive); }

.form__foot {
	margin: var(--sp-5) 0 0; padding-top: var(--sp-5);
	border-top: 1px solid var(--border);
	font-size: .9rem; color: var(--muted-fg); text-align: center;
}
.form__foot a { font-weight: 600; }

.visit {
	position: sticky; top: calc(var(--header-h) + 16px);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.visit__head { padding: var(--sp-5) var(--sp-6); background: var(--ink-deep); }
.visit__head h3 { color: #fff; font-size: var(--fs-lg); margin: 0; }
.visit__body { padding: var(--sp-6); }
.visit__block { padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.visit__block:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.visit__label {
	display: block; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: var(--sp-2);
}
.visit__block address, .visit__block p { font-size: .97rem; color: var(--fg); margin: 0; line-height: 1.6; }

.visit__phone {
	display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
	min-height: 48px; padding: var(--sp-2) 0;
	font-size: .96rem; font-weight: 600; color: var(--fg);
	transition: color var(--t-fast) var(--ease);
}
.visit__phone + .visit__phone { border-top: 1px solid var(--border); }
.visit__phone:hover { color: var(--accent-dark); }
.visit__phone span { font-weight: 400; color: var(--muted-fg); font-variant-numeric: tabular-nums; }

.visit__actions { padding: 0 var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-3); }
.visit__gstin {
	margin: 0; padding: var(--sp-4) var(--sp-6);
	background: var(--muted); border-top: 1px solid var(--border);
	font-size: var(--fs-xs); color: var(--muted-fg); text-align: center;
}

/* ---------- 12b. Contact page ---------- */

/* Page hero: same lavender panel as the homepage, but shorter — there is no
   product photography here to balance a tall one. */
.hero--page { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }
.hero__in--page { grid-template-columns: 1fr; text-align: center; }
.hero__in--page .hero__text { align-items: center; }
.hero__in--page .hero__lede { margin-bottom: 0; margin-inline: auto; }
.hero__in--page .hero__title { margin-bottom: var(--sp-4); }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); }

.contact-card {
	display: flex; flex-direction: column;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--sp-8) var(--sp-6);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.contact-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-3px); }

.contact-card__icon {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	background: var(--lavender);
	color: var(--fg);
	border-radius: var(--radius-sm);
	margin-bottom: var(--sp-5);
}
.contact-card__icon--wa { background: #E3F7EC; color: var(--wa-dark); }

.contact-card__title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.contact-card__desc { font-size: .95rem; color: var(--muted-fg); margin-bottom: var(--sp-5); }
.contact-card__address { font-size: .97rem; line-height: 1.7; margin-bottom: var(--sp-5); }

.contact-card__list { margin-top: auto; }
.contact-card__list li + li { margin-top: var(--sp-2); }
.contact-card__list a {
	display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
	min-height: 48px; padding: var(--sp-2) var(--sp-4);
	background: var(--muted);
	border-radius: var(--radius-sm);
	color: var(--fg);
	transition: background var(--t-fast) var(--ease);
}
.contact-card__list a:hover { background: var(--lavender); color: var(--fg); }
.contact-card__list strong { font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
.contact-card__list span { color: var(--muted-fg); font-size: .92rem; font-variant-numeric: tabular-nums; }

.contact-card .btn { margin-top: auto; }

/* Hours + map */
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.hours { margin-top: var(--sp-6); border-top: 1px solid var(--border-strong); }
.hours__row {
	display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-2);
	border-bottom: 1px solid var(--border);
	font-size: .97rem;
}
.hours__row.is-today { background: var(--card); border-radius: var(--radius-sm); font-weight: 600; }
.hours__day { display: inline-flex; align-items: center; gap: var(--sp-3); }
.hours__badge {
	font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	background: var(--lavender); color: var(--fg);
	padding: 2px var(--sp-2); border-radius: var(--radius-pill);
}
.hours__time { color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.hours__row.is-today .hours__time { color: var(--fg); }

.visit-note {
	display: flex; align-items: center; gap: var(--sp-2);
	margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--muted-fg);
}

.map-frame {
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--muted);
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow-sm);
}
.map-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.map-caption {
	display: flex; align-items: flex-start; gap: var(--sp-2);
	margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted-fg);
}
.map-caption .ico { margin-top: 2px; }

/* ---------- 12b2. FAQ ----------
   Native <details>, so it works before JavaScript runs and stays keyboard
   accessible without any code of ours. */
.faq { display: grid; gap: var(--sp-3); }

.faq__item {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--t) var(--ease);
}
.faq__item[open] { border-color: var(--border-strong); }

.faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
	padding: var(--sp-5) var(--sp-6);
	font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
	color: var(--fg);
	cursor: pointer;
	list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--muted); }

/* Plus that becomes a minus, drawn in CSS so there is no icon to load. */
.faq__icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.faq__icon::before,
.faq__icon::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	background: var(--fg); border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.faq__icon::before { width: 13px; height: 2px; }
.faq__icon::after  { width: 2px; height: 13px; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__a { padding: 0 var(--sp-6) var(--sp-5); }
.faq__a p { color: var(--muted-fg); font-size: .97rem; margin: 0; max-width: 68ch; }

/* ---------- 12c. About page ---------- */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.about-split p { color: var(--muted-fg); font-size: 1.02rem; }

.about-photo {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--muted);
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow-md);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

.owner-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); max-width: 720px; margin-inline: auto; }

.owner-card {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--sp-8) var(--sp-6);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.owner-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.owner-card__mark {
	display: grid; place-items: center;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--lavender);
	color: var(--fg);
	font-family: var(--font-head); font-weight: 600; font-size: 1.6rem;
	margin-bottom: var(--sp-5);
}
.owner-card__name { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.owner-card__role {
	font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg);
	margin-bottom: var(--sp-6);
}
.owner-card .btn { margin-top: auto; }

/* Closing call to action, shared by the inner pages. */
.cta-panel {
	display: grid; grid-template-columns: 1.3fr auto;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	background: var(--lavender);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 4vw, 3rem);
}
.cta-panel .sec-title { margin-bottom: var(--sp-3); }
.cta-panel .sec-lede { color: #46464F; }
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- 13. Inner pages ---------- */
.page-body { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.entry { margin-bottom: var(--sp-12); }
.entry:last-of-type { margin-bottom: 0; }
.entry__title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: var(--sp-5); }
.entry__title a { color: inherit; }
.entry__title a:hover { color: var(--accent-dark); }
.entry__content h2 { font-size: var(--fs-xl); margin-top: var(--sp-10); }
.entry__content h3 { font-size: var(--fs-lg); margin-top: var(--sp-8); }
.entry__content ul, .entry__content ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.entry__content ul { list-style: disc; }
.entry__content ol { list-style: decimal; }
.entry__content li { margin-bottom: var(--sp-2); }
.entry__content img { border-radius: var(--radius); margin-block: var(--sp-6); }
.entry__content blockquote {
	margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-6);
	border-left: 3px solid var(--accent); background: var(--muted);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pagination { margin-top: var(--sp-10); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 48px; min-height: 48px; padding: 0 var(--sp-3);
	font-family: var(--font-head); font-weight: 500; font-size: .95rem;
	color: var(--muted-fg); background: var(--card);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent-dark); }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 14. Footer ---------- */
.site-footer { background: var(--ink-deep); color: rgba(255,255,255,.7); padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.1fr; gap: clamp(2rem, 4vw, 3rem); padding-bottom: var(--sp-12); }
.site-footer .brand { color: #fff; margin-bottom: var(--sp-5); }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__sub { color: rgba(255,255,255,.55); }
.site-footer .brand__mark { background: var(--accent); color: #fff; }
.site-footer__about { font-size: .92rem; line-height: 1.7; max-width: 40ch; }
.site-footer__gstin { font-size: var(--fs-sm); color: rgba(255,255,255,.55); margin-top: var(--sp-4); }

.site-footer__heading {
	font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-5);
}
.site-footer__list li { margin-bottom: var(--sp-3); }
.site-footer__list a { font-size: .93rem; color: rgba(255,255,255,.7); }
.site-footer__list a:hover { color: var(--accent-bright); }
.site-footer__list--contact a { display: flex; gap: var(--sp-3); align-items: flex-start; min-height: 48px; }
.site-footer__list--contact .ico { color: var(--accent); margin-top: 3px; }
.site-footer__list--contact strong { display: block; color: #fff; font-weight: 600; font-size: .93rem; }
.site-footer__list--contact span { font-variant-numeric: tabular-nums; }

.site-footer__address { font-size: .93rem; line-height: 1.7; margin-bottom: var(--sp-4); }
.site-footer__hours { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: .9rem; }
.site-footer__hours .ico { color: var(--accent); margin-top: 3px; }

.site-footer__bar { border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--sp-5); }
.site-footer__bar-in { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: space-between; align-items: center; }
.site-footer__bar p { margin: 0; font-size: var(--fs-sm); }
.site-footer__note { color: rgba(255,255,255,.5); }

/* Legal line: the privacy link and GSTIN. Quieter than the note above it,
   but the link still has to clear 4.5:1 against the dark footer. */
.site-footer__legal {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.5);
}
.site-footer__legal a {
  color: rgba(255,255,255,.82);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: #fff; }

/* ---------- 15. App-style bottom navigation ----------
   Mobile only. Five destinations, icon plus label, with an active pill
   behind the current one — the pattern people already know from apps.
   Material's guidance: max five items, always label them. */
.appnav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-float);
	display: none; grid-template-columns: repeat(5, 1fr);
	background: var(--card);
	border-top: 1px solid var(--border);
	padding: var(--sp-2) var(--sp-1) 0;
	padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -2px 12px rgba(27,27,31,.06);
}

.appnav__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px;
	/* 52px keeps the tap target at Apple's 44pt minimum with room to spare. */
	min-height: 52px;
	/* min-width: 0 lets a grid cell shrink below its content on a narrow
	   phone. Without it the track refuses to go under the widest label and
	   the bar overflows the screen. */
	min-width: 0;
	padding: var(--sp-1) 1px;
	color: var(--muted-fg);
	text-align: center;
	transition: color var(--t-fast) var(--ease);
}

/* The icon sits in its own pill so the active state has a clear shape,
   rather than relying on colour alone. */
/* The pill must shrink with the cell. At a fixed 56px it was wider than the
   cell on a 375px screen, which pushed the whole bar past the viewport and
   made every page scroll sideways on the most common small phone. */
.appnav__icon {
	display: grid; place-items: center;
	width: 100%; max-width: 56px; height: 30px;
	border-radius: var(--radius-pill);
	transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.appnav__icon .ico { width: 21px; height: 21px; }

.appnav__label {
	font-family: var(--font-head);
	font-size: .68rem; font-weight: 500; line-height: 1.2;
	letter-spacing: -.01em;
	white-space: nowrap;
	/* Labels stay — Material is explicit that bottom nav items are labelled,
	   and icon-only navigation is guesswork for anyone who does not already
	   know the icons. On a very narrow screen the text shrinks instead. */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Small phones: tighten the type rather than drop the labels. */
@media (max-width: 380px) {
	.appnav__label { font-size: .62rem; letter-spacing: -.02em; }
	.appnav__icon { height: 28px; }
	.appnav__icon .ico { width: 19px; height: 19px; }
}

.appnav__item.is-active { color: var(--fg); }
.appnav__item.is-active .appnav__icon { background: var(--lavender); color: var(--fg); }
.appnav__item.is-active .appnav__label { font-weight: 600; }

.appnav__item:active .appnav__icon { background: var(--border); }

/* WhatsApp keeps its own colour so it is recognisable at a glance. */
.appnav__item--wa .appnav__icon { color: var(--wa); }
.appnav__item--wa.is-active .appnav__icon { background: #E3F7EC; color: var(--wa-dark); }

/* =====================================================================
   19. Motion

   Kept deliberate: one or two moving things per view, 150-300ms for
   interaction feedback, slower and quieter for ambient shapes. Everything
   here is switched off under prefers-reduced-motion (section 20).
   ===================================================================== */

/* --- Scroll reveal ---
   Guarded by .js-reveal on <html>, which main.js only adds once it knows it
   can observe and un-hide these elements. If the script fails, is blocked, or
   the browser lacks IntersectionObserver, the class is never added and the
   content simply renders — visible, unanimated. Content must never depend on
   JS to be readable. */
.js-reveal .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* --- Ambient background: pastel blobs + product motifs ---
   Two layers, both decorative and both transform-only so they stay cheap:
     .bg-shapes span   — soft pastel blobs that drift
     .bg-motifs svg    — outlined furniture/appliance shapes that float
   The motifs are what tie the motion to this business rather than being
   generic circles. */
.bg-shapes {
	position: absolute; inset: 0; z-index: 0;
	overflow: hidden; pointer-events: none;
}
.bg-shapes span {
	position: absolute;
	border-radius: 50%;
	opacity: .55;
	will-change: transform;
}
.bg-shapes span:nth-child(1) {
	width: 420px; height: 420px; top: -140px; left: -110px;
	background: var(--lavender-deep);
	animation: drift-a 26s var(--ease) infinite alternate;
}
/* The peach and sand blobs are hidden in the hero: they sat outside the hero
   card, on the page background, where they read as two stray colours rather
   than as part of the design. The lavender one stays because it matches the
   hero panel it sits behind.
   Scoped to .hero on purpose — the dark bands use their own two-blob styling
   below, and a blanket rule here would strip that as well. */
.hero .bg-shapes span:nth-child(2),
.hero .bg-shapes span:nth-child(3) { display: none; }
/* On the dark band the blobs must be light to read at all. */
.sec--deep .bg-shapes span { background: #fff; opacity: .05; }
.sec--deep .bg-shapes span:nth-child(2) { background: var(--lavender-deep); opacity: .10; }

@keyframes drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(40px, 30px, 0) scale(1.12); }
}
@keyframes drift-b {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-34px, -26px, 0) scale(1.08); }
}

/* Product motifs: outlined sofas, TVs, lamps drifting slowly behind the
   content. Stroked, never filled, so they read as a watermark. */
.bg-motifs {
	position: absolute; inset: 0; z-index: 0;
	overflow: hidden; pointer-events: none;
}
.bg-motifs .motif {
	position: absolute;
	color: var(--fg);
	opacity: .07;
	will-change: transform;
}
.bg-motifs .motif svg { width: 100%; height: 100%; }
.sec--deep .bg-motifs .motif { color: #fff; opacity: .09; }

.motif--1 { width: 96px;  top: 12%;  left: 6%;   animation: float-a 19s var(--ease) infinite alternate; }
.motif--2 { width: 74px;  top: 62%;  left: 14%;  animation: float-b 23s var(--ease) infinite alternate; }
.motif--3 { width: 110px; top: 20%;  right: 8%;  animation: float-b 27s var(--ease) infinite alternate-reverse; }
.motif--4 { width: 68px;  bottom: 14%; right: 18%; animation: float-a 21s var(--ease) infinite alternate-reverse; }
.motif--5 { width: 84px;  top: 45%;  left: 46%;  opacity: .05; animation: float-a 31s var(--ease) infinite alternate; }

@keyframes float-a {
	from { transform: translate3d(0, 0, 0) rotate(-4deg); }
	to   { transform: translate3d(18px, -26px, 0) rotate(5deg); }
}
@keyframes float-b {
	from { transform: translate3d(0, 0, 0) rotate(3deg); }
	to   { transform: translate3d(-22px, 20px, 0) rotate(-6deg); }
}

/* Sections carrying background layers need their content lifted above them. */
.hero, .sec--deep, .sec--motifs { position: relative; }
.hero > .wrap, .sec--deep > .wrap, .sec--motifs > .wrap { position: relative; z-index: 1; }
.sec--motifs { overflow: hidden; }

/* --- Hero entrance: a short, staggered lift on first paint --- */
.hero__text > * {
	opacity: 0;
	transform: translateY(14px);
	animation: rise 600ms var(--ease) forwards;
}
.hero__text > *:nth-child(1) { animation-delay: 60ms; }
.hero__text > *:nth-child(2) { animation-delay: 130ms; }
.hero__text > *:nth-child(3) { animation-delay: 200ms; }
.hero__text > *:nth-child(4) { animation-delay: 270ms; }
.hero__text > *:nth-child(5) { animation-delay: 340ms; }

.hero__visual { opacity: 0; animation: rise 700ms var(--ease) 220ms forwards; }

@keyframes rise {
	to { opacity: 1; transform: none; }
}

/* The hero panel is already revealed by the entrance animation, so the
   scroll-reveal class must not fight it. */
.hero .reveal { opacity: 1; transform: none; transition: none; }

/* --- Underline that grows on hover, for text links --- */
.card__link,
.visit__phone {
	position: relative;
}
.card__link::after {
	content: "";
	position: absolute; left: 0; bottom: -2px;
	width: 100%; height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t) var(--ease);
}
.card__link:hover::after { transform: scaleX(1); }

/* --- Brand chips lift slightly on hover --- */
.brands__item { transition: color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease); }
.brands__item:hover { transform: translateY(-3px); }

/* --- Step number pulses once when its card is revealed --- */
.step.is-in .step__num { animation: pop 420ms var(--ease) 180ms; }
@keyframes pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

/* --- Product cards rise in a staggered wave, and the photo settles ---
   The image starts very slightly zoomed and eases back as the card lands,
   which reads as the photo "arriving" rather than snapping into place.
   Note both rules carry .reveal so the .is-in reset stays specific enough
   to win — a bare .card selector here would strand the card mid-animation. */
/* All guarded by .js-reveal for the same reason as .reveal above: without
   JS these elements must render in their finished state, not hidden. */
.js-reveal .card.reveal { transform: translateY(24px); }
.js-reveal .card.reveal.is-in { transform: none; }

.js-reveal .card .card__media img { transform: scale(1.06); transition: transform 700ms var(--ease); }
.js-reveal .card.is-in .card__media img { transform: scale(1); }
/* The hover zoom takes over once the card has settled. */
.js-reveal .card.is-in:hover .card__media img { transform: scale(1.04); }
.card:hover .card__media img { transform: scale(1.04); }

/* --- Icon chip on the photo pops in after the card --- */
.js-reveal .card .card__icon { transform: scale(.7); opacity: 0; transition: transform 380ms var(--ease) 220ms, opacity 380ms var(--ease) 220ms, background var(--t) var(--ease), color var(--t) var(--ease); }
.js-reveal .card.is-in .card__icon { transform: scale(1); opacity: 1; }

/* --- Hero facts count up behind a rising mask --- */
.hero__fact { overflow: hidden; }

/* --- Section eyebrows slide in from the left --- */
.reveal .eyebrow,
.eyebrow.reveal { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }

/* --- Assurance rows sweep a soft tint on hover --- */
.why__row { position: relative; }
.why__row::before {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	background: var(--card);
	transform: scaleX(0); transform-origin: left;
	transition: transform 420ms var(--ease);
	border-radius: var(--radius-sm);
}
.why__row:hover::before { transform: scaleX(1); }
.why__row > * { position: relative; z-index: 1; }
/* The plain background swap is no longer needed now the sweep does it. */
.why__row:hover { background: transparent; }

/* --- Nav pills and buttons get a subtle press --- */
.nav__list a:active,
.appnav__item:active { transform: scale(.97); }
.nav__list a { transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
	            border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.appnav__item { transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }

/* --- Counter digits use tabular figures so they do not jitter as they count --- */
.hero__fact dt { font-variant-numeric: tabular-nums; }

/* ---------- 17. Responsive: 375 / 768 / 1024 / 1440 ---------- */
@media (max-width: 1024px) {
	.hero__in, .emi__in, .contact__in, .visit-grid,
	.about-split, .cta-panel { grid-template-columns: 1fr; }
	.map-frame { aspect-ratio: 16 / 10; }
	.visit { position: static; }
	.brands__grid { grid-template-columns: repeat(3, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.why__row { grid-template-columns: 44px 1fr; }
	.why__desc { grid-column: 2; }
}

/* Below 900px the header keeps only the brand and the Custom Made button.
   There is no burger and no dropdown panel: the app-style bar fixed to the
   bottom of the screen is the navigation on a phone, and two menus competing
   for the same job is worse than one that is always in reach of a thumb. */
@media (max-width: 900px) {
	.nav { display: none; }
	.nav-toggle { display: none; }
	.site-header__in { justify-content: space-between; gap: var(--sp-3); }
	/* The brand may shrink; the button may not, since it is the only header
	   destination left on a phone. */
	.brand { min-width: 0; }
	.brand__sub { overflow: hidden; text-overflow: ellipsis; }
}

/* On the narrowest phones the header button and the shop name together are
   wider than the screen, which pushed the page sideways. The button keeps its
   44px tap height and loses only horizontal padding. */
@media (max-width: 420px) {
	/* Narrower, but never shorter than the 44px minimum tap target. */
	.site-header__cta { padding-inline: var(--sp-3); font-size: .82rem; min-height: 44px; }
	.brand__mark { width: 36px; height: 36px; }
	.brand__sub { display: none; }
}

@media (max-width: 900px) {

	.topbar__item--hide { display: none; }
	.topbar__in { justify-content: space-between; flex-wrap: nowrap; gap: var(--sp-3); }
	.topbar__phone { margin-left: 0; white-space: nowrap; }
	/* Address truncates rather than pushing the phone onto a second row. */
	.topbar__item:first-child { min-width: 0; }
	.topbar__item:first-child span,
	.topbar__item:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	.appnav { display: grid; }
	/* Clear the bottom bar: 52px row + padding + the phone's safe area. */
	body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
	.form__row { grid-template-columns: 1fr; gap: 0; }
	.brands__grid { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: 1fr; }
	.dept--custom { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr; }
	.dept__head { grid-template-columns: 1fr; }
	.dept__count { padding-bottom: 0; }
	.hero__cta .btn { width: 100%; }
	.hero__fact { flex-basis: 50%; min-width: 0; }
}

/* ---------- 18. Reduced motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	/* Anything that starts hidden must end up visible, not stuck at opacity 0
	   or scaled down. Every animated-in element is listed here on purpose. */
	.js-reveal .reveal,
	.hero__text > *,
	.hero__visual,
	.js-reveal .card.reveal,
	.js-reveal .card.reveal.is-in,
	.js-reveal .card .card__icon,
	.js-reveal .card .card__media img { opacity: 1; transform: none; animation: none; }

	/* Ambient layers are decoration only: drop them entirely. */
	.bg-shapes,
	.bg-motifs,
	.hero__sheen { display: none; }
	.hero__in::after { display: none; }

	.card__link::after { transform: scaleX(1); }
	.why__row::before { transform: scaleX(0); }
	.why__row:hover { background: var(--card); }

	.card:hover .card__media img,
	.card.is-in:hover .card__media img,
	.brands__item:hover,
	.nav__list a:active,
	.appnav__item:active,
	.card:hover { transform: none; }
}

@media print {
	.topbar, .nav, .nav-toggle, .appnav, .site-header__cta,
	.bg-shapes, .bg-motifs, .hero__sheen { display: none !important; }
	.hero__in::after { display: none !important; }
	body { padding-bottom: 0 !important; }
	.js-reveal .card.reveal, .js-reveal .card.reveal.is-in,
	.js-reveal .card .card__icon, .js-reveal .card .card__media img { opacity: 1; transform: none; }
	body { color: #000; background: #fff; }
	.js-reveal .reveal, .hero__text > *, .hero__visual { opacity: 1; transform: none; animation: none; }
	.card, .form, .visit, .step { box-shadow: none; }
	.sec--deep, .visit__head { background: #fff !important; color: #000 !important; }
	.sec--deep h2, .visit__head h3, .emi__item strong { color: #000 !important; }
}