/*
Theme Name: Smiley International
Theme URI: https://smileyinternational.in
Template: hello-elementor
Author: Smiley International
Description: Child theme for Smiley International — manufacturer of Printed Polar Fleece Blankets, Plain Polar Fleece Blankets, Washable Polar Fleece and Snow Dohar, Panipat. B2B enquiry catalogue built on Elementor Free. No ecommerce, no prices.
Version: 1.0.0
Requires PHP: 7.4
License: Proprietary
Text Domain: smiley-international
*/

/* =========================================================================
   1. Brand tokens

   Warm earth palette. Every product photograph is rust, terracotta, camel,
   maroon or olive, so the ground is warm and the accent is drawn straight
   out of the goods. Contrast ratios are noted where they matter: terracotta
   is the text-safe accent, amber is decorative only.
   ========================================================================= */
:root {
	/* Neutrals — warm espresso through to cream. */
	--si-ink:       #2B2118;  /* headings, header, tables      15.8:1 on white */
	--si-ink-2:     #1C1511;  /* hero + footer ground                        */
	--si-ink-soft:  #4A3A2E;
	--si-body:      #4E443C;  /* body copy                      8.9:1 on white */
	--si-muted:     #6F6459;  /* secondary copy   5.8:1 on white, 5.1:1 on cream */
	--si-line:      #E7DCCB;
	--si-cream:     #F7F1E7;  /* alternating section ground                  */
	--si-cream-2:   #FCF8F2;
	--si-white:     #FFFFFF;

	/* Accent — terracotta, taken from the 1,000 GSM floral and rust ranges. */
	--si-accent:       #AF5029;  /* CTAs, eyebrows, links  5.3:1 white, 4.7:1 cream */
	--si-accent-dark:  #8F4224;  /* hover                                     */
	--si-accent-light: #E29A63;  /* accents on dark grounds    7.8:1 on ink-2 */

	/* Amber — decorative only. Too light for text at 2.9:1, so it is used
	   for the weight-ladder ramp and nothing that has to be read. */
	--si-amber:       #C08A2E;
	--si-amber-light: #E6B45C;

	--si-whatsapp:      #25D366;  /* icon only — brand recognition            */
	--si-whatsapp-text: #17853F;  /* labelled buttons          4.7:1 with white */

	--si-font-head: "Fraunces", "Iowan Old Style", Georgia, serif;
	--si-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--si-radius:    10px;
	--si-radius-lg: 16px;
	--si-shadow:    0 2px 8px rgba(43, 33, 24, .06), 0 12px 32px rgba(43, 33, 24, .08);
	--si-shadow-lg: 0 4px 14px rgba(43, 33, 24, .10), 0 22px 50px rgba(43, 33, 24, .14);
	--si-ease:      cubic-bezier(.22, .61, .36, 1);
	--si-max:       1200px;
}
/* =========================================================================
   2. Base typography

   Fraunces for display, Inter for everything read at length. Fraunces is run
   with WONK off and SOFT dialled up: the quirk axes are charming in a logo
   and distracting in a spec table. Inter replaces the previous geometric
   sans, which lost legibility in the GSM tables at small sizes.
   ========================================================================= */
body {
	font-family: var(--si-font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--si-body);
	background: var(--si-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
}

/* Keep the page from scrolling sideways. This belongs on html, not body:
   overflow-x on body promotes body to the scroll container, which breaks
   window scrolling and the IntersectionObserver reveal. */
html { overflow-x: hidden; }

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--si-font-head);
	font-variation-settings: "SOFT" 40, "WONK" 0;
	color: var(--si-ink);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -.015em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4.9vw, 3.7rem); font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.28rem, 2.2vw, 1.7rem); }
h4 { font-size: clamp(1.06rem, 1.7vw, 1.22rem); font-weight: 600; }

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

a {
	color: var(--si-accent);
	text-decoration-color: rgba(179, 84, 47, .38);
	text-underline-offset: 3px;
}
a:hover { color: var(--si-accent-dark); }

strong, b { font-weight: 600; color: var(--si-ink); }

/* Tabular figures keep the GSM columns from jittering between rows. */
.si-table td, .si-table th, .si-ladder__gsm, .si-spec__badge b, .si-stat b, .si-trust__item b {
	font-variant-numeric: tabular-nums;
}

::selection { background: var(--si-accent); color: #fff; }

img { max-width: 100%; height: auto; }

/* One visible focus treatment for everything keyboard-reachable. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--si-accent);
	outline-offset: 3px;
	border-radius: 4px;
}
/* =========================================================================
   3. Shared layout helpers
   ========================================================================= */
.si-wrap { max-width: var(--si-max); margin-inline: auto; padding-inline: 20px; }

.si-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--si-font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--si-accent);
	margin-bottom: .9rem;
}
.si-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--si-accent);
	flex: none;
}

.si-lede {
	font-size: 1.1rem;
	color: var(--si-muted);
	max-width: 62ch;
}

.si-section-head { margin-bottom: 2.6rem; max-width: 760px; }
.si-section-head h2 { margin: 0 0 .7rem; }

/* =========================================================================
   4. Buttons
   ========================================================================= */
.si-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: 15px 30px;
	border-radius: var(--si-radius);
	font-family: var(--si-font-body);
	font-size: .96rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none !important;
	transition: transform .25s var(--si-ease), background-color .25s var(--si-ease),
	            color .25s var(--si-ease), border-color .25s var(--si-ease), box-shadow .25s var(--si-ease);
}
.si-btn:hover { transform: translateY(-2px); }
.si-btn:focus-visible { outline: 3px solid var(--si-accent-light); outline-offset: 3px; }

.si-btn--primary    { background: var(--si-accent); color: #fff; box-shadow: 0 8px 20px rgba(179, 84, 47, .28); }
.si-btn--primary:hover { background: var(--si-accent-dark); color: #fff; }

.si-btn--ink    { background: var(--si-ink); color: #fff; }
.si-btn--ink:hover { background: var(--si-ink-2); color: #fff; }

.si-btn--ghost   { background: transparent; color: var(--si-ink); border-color: rgba(43, 33, 24, .22); }
.si-btn--ghost:hover { border-color: var(--si-ink); background: var(--si-ink); color: #fff; }

.si-btn--light   { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.42); backdrop-filter: blur(4px); }
.si-btn--light:hover { background: #fff; color: var(--si-ink); border-color: #fff; }

.si-btn--wa      { background: var(--si-whatsapp-text); color: #fff; box-shadow: 0 8px 20px rgba(23, 133, 63, .32); }
.si-btn--wa:hover { background: #126C33; color: #fff; }

.si-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* =========================================================================
   5. Hero
   ========================================================================= */
.si-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 76vh, 720px);
	background: var(--si-ink-2);
	overflow: hidden;
}
.si-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.04);
}
.si-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(28, 21, 17, .94) 0%, rgba(28, 21, 17, .84) 42%, rgba(28, 21, 17, .52) 100%);
}
.si-hero__inner { position: relative; z-index: 2; width: 100%; }
.si-hero__content { max-width: 660px; color: #fff; padding-block: 80px; }
.si-hero h1 { color: #fff; margin: 0 0 1.1rem; }
.si-hero h1 em { font-style: normal; color: var(--si-accent-light); }
.si-hero__sub { font-size: 1.12rem; color: rgba(255,255,255,.82); margin-bottom: 2rem; max-width: 56ch; }
.si-hero .si-eyebrow { color: var(--si-accent-light); }
.si-hero .si-eyebrow::before { background: var(--si-accent-light); }

.si-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 34px;
	margin-top: 2.6rem;
	padding-top: 1.7rem;
	border-top: 1px solid rgba(255,255,255,.16);
}
.si-hero__meta span {
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.72);
}

/* =========================================================================
   6. Trust strip
   ========================================================================= */
.si-trust {
	background: var(--si-ink);
	color: #fff;
	padding: 26px 0;
}
.si-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px 24px;
	text-align: center;
}
.si-trust__item { display: flex; flex-direction: column; gap: 3px; }
.si-trust__item b { font-family: var(--si-font-head); font-size: 1.28rem; color: var(--si-accent-light); font-weight: 600; }
.si-trust__item span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* =========================================================================
   7. Cards — product ranges
   ========================================================================= */
.si-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px;
}
.si-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-lg);
	overflow: hidden;
	text-decoration: none;
	transition: transform .35s var(--si-ease), box-shadow .35s var(--si-ease), border-color .35s var(--si-ease);
}
.si-card:hover { transform: translateY(-6px); box-shadow: var(--si-shadow-lg); border-color: transparent; }
.si-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--si-cream); }
.si-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--si-ease); }
.si-card:hover .si-card__media img { transform: scale(1.06); }
.si-card__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(28, 21, 17, .88);
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
}
.si-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.si-card__body h3 { margin: 0 0 .5rem; font-size: 1.32rem; }
.si-card__body p { font-size: .95rem; color: var(--si-muted); margin: 0 0 1.2rem; }
.si-card, .si-card:hover, .si-gallery a, .si-mobile-bar a, .si-wa-float { text-decoration: none !important; }
.si-card__more {
	margin-top: auto;
	font-size: .86rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--si-accent);
	display: inline-flex;
	align-items: center;
	gap: .5em;
}
.si-card__more::after { content: "→"; transition: transform .3s var(--si-ease); }
.si-card:hover .si-card__more::after { transform: translateX(5px); }

/* =========================================================================
   8. GSM weight ladder
   ========================================================================= */
.si-ladder { display: flex; flex-direction: column; gap: 10px; }
.si-ladder__row {
	display: grid;
	grid-template-columns: 132px 1fr 96px;
	align-items: center;
	gap: 18px;
	padding: 15px 22px;
	background: #fff;
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius);
	transition: border-color .3s var(--si-ease), box-shadow .3s var(--si-ease), transform .3s var(--si-ease);
}
.si-ladder__row:hover { border-color: var(--si-accent); box-shadow: var(--si-shadow); transform: translateX(3px); }
.si-ladder__gsm { font-family: var(--si-font-head); font-size: 1.22rem; font-weight: 600; color: var(--si-ink); }
.si-ladder__desc { font-size: .94rem; color: var(--si-muted); }
.si-ladder__bar { height: 8px; border-radius: 999px; background: var(--si-line); overflow: hidden; }
.si-ladder__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--si-amber-light), var(--si-amber) 45%, var(--si-accent)); }

/* =========================================================================
   9. Specification table
   ========================================================================= */
.si-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--si-radius); border: 1px solid var(--si-line); }
.si-table { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; font-size: .95rem; }
.si-table thead th {
	background: var(--si-ink);
	color: #fff;
	font-family: var(--si-font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 18px;
	white-space: nowrap;
}
.si-table td { padding: 14px 18px; border-top: 1px solid var(--si-line); vertical-align: top; }
.si-table tbody tr:nth-child(even) { background: var(--si-cream-2); }
.si-table tbody tr:hover { background: rgba(179, 84, 47, .07); }
.si-table td:first-child { font-weight: 600; color: var(--si-ink); white-space: nowrap; }

.si-note {
	font-size: .86rem;
	color: var(--si-muted);
	font-style: italic;
	margin-top: 14px;
	padding-left: 14px;
	border-left: 2px solid var(--si-line);
}

/* =========================================================================
   10. Weight spec cards (printed range page)
   ========================================================================= */
.si-spec { display: grid; gap: 18px; }
.si-spec__item {
	display: grid;
	grid-template-columns: 200px 1fr;
	background: #fff;
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-lg);
	overflow: hidden;
	transition: box-shadow .35s var(--si-ease), border-color .35s var(--si-ease);
}
.si-spec__item:hover { box-shadow: var(--si-shadow); border-color: rgba(179,84,47,.4); }
.si-spec__badge {
	background: var(--si-ink);
	color: #fff;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}
.si-spec__badge b { font-family: var(--si-font-head); font-size: 1.7rem; font-weight: 600; color: #fff; line-height: 1.1; }
.si-spec__badge span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--si-accent-light); }
.si-spec__body { padding: 24px 26px; }
.si-spec__body h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.si-spec__body p { font-size: .95rem; color: var(--si-muted); margin: 0 0 .9rem; }
.si-spec__apps { display: flex; flex-wrap: wrap; gap: 8px; }
.si-spec__apps span {
	font-size: .78rem;
	font-weight: 500;
	color: var(--si-ink);
	background: var(--si-cream);
	border: 1px solid var(--si-line);
	padding: 5px 12px;
	border-radius: 999px;
}

/* =========================================================================
   11. Colour swatches (plain fleece)
   ========================================================================= */
.si-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.si-swatch { text-align: center; }
.si-swatch__chip {
	aspect-ratio: 4 / 3;
	border-radius: var(--si-radius);
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: inset 0 -22px 40px rgba(0,0,0,.18), var(--si-shadow);
	margin-bottom: 12px;
	transition: transform .35s var(--si-ease);
}
.si-swatch:hover .si-swatch__chip { transform: translateY(-5px) scale(1.02); }
.si-swatch b { display: block; font-family: var(--si-font-head); font-size: 1.05rem; color: var(--si-ink); }
.si-swatch span { font-size: .8rem; color: var(--si-muted); }

/* =========================================================================
   12. Feature list
   ========================================================================= */
.si-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; }
.si-feature { display: flex; gap: 16px; }
.si-feature__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--si-cream);
	border: 1px solid var(--si-line);
	display: grid;
	place-items: center;
	font-size: 1.15rem;
	color: var(--si-accent);
}
.si-feature h4 { margin: 0 0 .35rem; font-size: 1.05rem; }
.si-feature p { font-size: .92rem; color: var(--si-muted); margin: 0; }

/* =========================================================================
   13. Gallery
   ========================================================================= */
.si-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.si-gallery figure { margin: 0; border-radius: var(--si-radius); overflow: hidden; background: var(--si-cream); aspect-ratio: 4 / 3; }
.si-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--si-ease); }
.si-gallery figure:hover img { transform: scale(1.07); }

/* =========================================================================
   14. Split (image + text)
   ========================================================================= */
.si-split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.si-split__media { border-radius: var(--si-radius-lg); overflow: hidden; box-shadow: var(--si-shadow-lg); }
.si-split__media img { display: block; width: 100%; }
.si-split--reverse .si-split__media { order: 2; }

/* =========================================================================
   15. Stats
   ========================================================================= */
.si-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px; }
.si-stat { padding: 24px 22px; background: var(--si-cream); border-radius: var(--si-radius); border-left: 3px solid var(--si-accent); }
.si-stat b { display: block; font-family: var(--si-font-head); font-size: 2.05rem; color: var(--si-ink); line-height: 1.1; margin-bottom: 4px; }
.si-stat span { font-size: .86rem; color: var(--si-muted); }

/* =========================================================================
   16. CTA band
   ========================================================================= */
.si-cta {
	background: var(--si-ink);
	color: #fff;
	border-radius: var(--si-radius-lg);
	padding: clamp(34px, 5vw, 58px);
	position: relative;
	overflow: hidden;
}
.si-cta::before {
	content: "";
	position: absolute;
	right: -80px;
	top: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(179,84,47,.30), transparent 68%);
}
.si-cta__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; }
.si-cta h2 { color: #fff; margin: 0 0 .6rem; }
.si-cta p { color: rgba(255,255,255,.78); margin: 0; max-width: 52ch; }

/* =========================================================================
   17. Contact cards
   ========================================================================= */
.si-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.si-contact {
	background: #fff;
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-lg);
	padding: 26px 24px;
	transition: box-shadow .3s var(--si-ease), transform .3s var(--si-ease);
}
.si-contact:hover { box-shadow: var(--si-shadow); transform: translateY(-3px); }
.si-contact span { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--si-accent); font-weight: 600; }
.si-contact b { display: block; font-family: var(--si-font-head); font-size: 1.28rem; color: var(--si-ink); margin: .5rem 0 .3rem; }
.si-contact a { display: block; font-size: 1.02rem; font-weight: 500; color: var(--si-body); text-decoration: none; margin-bottom: .2rem; }
.si-contact a:hover { color: var(--si-accent); }
.si-contact address { font-style: normal; font-size: .95rem; color: var(--si-muted); line-height: 1.6; }

/* =========================================================================
   18. FAQ (details/summary — no JS)
   ========================================================================= */
.si-faq { display: flex; flex-direction: column; gap: 12px; }
.si-faq details {
	background: #fff;
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius);
	overflow: hidden;
}
.si-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 54px 18px 22px;
	font-family: var(--si-font-head);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--si-ink);
	position: relative;
}
.si-faq summary::-webkit-details-marker { display: none; }
.si-faq summary::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--si-font-body);
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--si-accent);
	transition: transform .3s var(--si-ease);
}
.si-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.si-faq details[open] summary { background: var(--si-cream); }
.si-faq__body { padding: 18px 22px 22px; font-size: .96rem; color: var(--si-muted); border-top: 1px solid var(--si-line); }

/* =========================================================================
   19. Breadcrumb / page banner
   ========================================================================= */
.si-banner {
	background: var(--si-ink);
	color: #fff;
	padding: clamp(56px, 8vw, 90px) 0 clamp(48px, 7vw, 74px);
	position: relative;
	overflow: hidden;
}
.si-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 82% 18%, rgba(179,84,47,.22), transparent 55%);
}
.si-banner__inner { position: relative; z-index: 1; }
.si-banner h1 { color: #fff; margin: 0 0 .8rem; }
.si-banner p { color: rgba(255,255,255,.78); max-width: 60ch; margin: 0; }
.si-banner .si-eyebrow { color: var(--si-accent-light); }
.si-banner .si-eyebrow::before { background: var(--si-accent-light); }

/* =========================================================================
   20. WhatsApp float + mobile action bar
   ========================================================================= */
.si-wa-float {
	position: fixed;
	right: 20px;
	bottom: 24px;
	z-index: 9990;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--si-whatsapp);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 22px rgba(37, 211, 102, .42);
	transition: transform .3s var(--si-ease), box-shadow .3s var(--si-ease);
}
.si-wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(37, 211, 102, .55); }
.si-wa-float svg { width: 30px; height: 30px; fill: #fff; }
.si-wa-float::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--si-whatsapp);
	animation: si-pulse 2.4s infinite;
}
@keyframes si-pulse {
	0%   { transform: scale(1);    opacity: .7; }
	70%  { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

.si-mobile-bar { display: none; }

/* =========================================================================
   21. Header / footer polish (HFE templates)
   ========================================================================= */
.si-logo {
	font-family: var(--si-font-head);
	font-variation-settings: "SOFT" 40, "WONK" 0;
	font-size: clamp(1.15rem, 1.6vw, 1.38rem);
	font-weight: 700;
	color: var(--si-ink);
	line-height: 1.15;
	text-decoration: none;
	letter-spacing: -.02em;
	white-space: nowrap;
}
.si-logo span { display: block; font-family: var(--si-font-body); font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--si-accent); margin-top: 4px; white-space: nowrap; }

.si-footer { background: var(--si-ink-2); color: rgba(255,255,255,.72); }
.si-footer h4 { color: #fff; font-family: var(--si-font-body); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.1rem; }
.si-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.si-footer a:hover { color: var(--si-accent-light); }
.si-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .93rem; }
.si-footer address { font-style: normal; font-size: .93rem; line-height: 1.75; }
.si-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.si-footer__tagline { font-family: var(--si-font-body); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--si-accent-light); margin-bottom: 1.2rem; }

/* Menu (HFE nav) */
.hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item {
	font-family: var(--si-font-body);
	font-size: .95rem;
	font-weight: 500;
	color: var(--si-ink);
}
.hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item { color: var(--si-accent); }

/* =========================================================================
   22. WPForms
   ========================================================================= */
.wpforms-container .wpforms-field-label { font-family: var(--si-font-body); font-size: .88rem; font-weight: 600; color: var(--si-ink); }
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea {
	border: 1px solid var(--si-line) !important;
	border-radius: var(--si-radius) !important;
	padding: 12px 14px !important;
	font-family: var(--si-font-body) !important;
	font-size: .96rem !important;
	background: #fff !important;
	transition: border-color .25s var(--si-ease), box-shadow .25s var(--si-ease);
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: var(--si-accent) !important;
	box-shadow: 0 0 0 3px rgba(179,84,47,.14) !important;
	outline: none !important;
}
.wpforms-container button[type=submit] {
	background: var(--si-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--si-radius) !important;
	padding: 15px 34px !important;
	font-family: var(--si-font-body) !important;
	font-size: .96rem !important;
	font-weight: 600 !important;
	letter-spacing: .02em !important;
	cursor: pointer;
	transition: background-color .25s var(--si-ease), transform .25s var(--si-ease) !important;
}
.wpforms-container button[type=submit]:hover { background: var(--si-accent-dark) !important; transform: translateY(-2px); }

/* =========================================================================
   23. Reveal on scroll
   ========================================================================= */
/* Hidden only once JS confirms it can reveal them again — never hide content on a JS failure. */
.si-js .si-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--si-ease), transform .7s var(--si-ease); }
.si-js .si-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.si-js .si-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.si-wa-float::after { animation: none; }
	* { scroll-behavior: auto !important; }
}

/* =========================================================================
   24. Responsive
   ========================================================================= */
@media (max-width: 1024px) {
	.si-split { grid-template-columns: 1fr; gap: 34px; }
	.si-split--reverse .si-split__media { order: 0; }
	.si-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 767px) {
	body { font-size: 16px; }
	.si-wrap { padding-inline: 18px; }
	.si-hero { min-height: auto; }
	.si-hero__content { padding-block: 62px 76px; }
		/* Lighter than a flat wash so the fabric still reads on a phone, but
	   still dark enough under the text block to hold contrast. */
	.si-hero__bg::after { background: linear-gradient(180deg, rgba(28,21,17,.80) 0%, rgba(28,21,17,.88) 55%, rgba(28,21,17,.94) 100%); }
	.si-hero__meta { gap: 8px 20px; }

	.si-ladder__row { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
	.si-ladder__bar { max-width: 140px; }

	.si-spec__item { grid-template-columns: 1fr; }
	.si-spec__badge { flex-direction: row; align-items: baseline; gap: 12px; padding: 16px 20px; }
	.si-spec__badge b { font-size: 1.35rem; }

	.si-cta__inner { flex-direction: column; align-items: flex-start; }

	/* Sticky mobile action bar */
	.si-mobile-bar {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9991;
		background: #fff;
		border-top: 1px solid var(--si-line);
		box-shadow: 0 -4px 20px rgba(43, 33, 24, .1);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.si-mobile-bar a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 11px 6px;
		font-size: .72rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--si-ink);
		text-decoration: none;
		border-right: 1px solid var(--si-line);
	}
	.si-mobile-bar a:last-child { border-right: none; }
	.si-mobile-bar a svg { width: 19px; height: 19px; fill: var(--si-accent); }
	.si-mobile-bar a.is-wa svg { fill: var(--si-whatsapp); }

	body { padding-bottom: 62px; }
	.si-wa-float { bottom: 76px; right: 16px; width: 50px; height: 50px; }
	.si-wa-float svg { width: 27px; height: 27px; }
}

@media (max-width: 479px) {
	.si-trust__grid { grid-template-columns: 1fr 1fr; }
	.si-swatches { grid-template-columns: 1fr 1fr; }
	.si-btn { padding: 14px 22px; font-size: .9rem; }
	.si-btn-row { gap: 10px; }
}

/* =========================================================================
   25. Site header (HFE template)
   ========================================================================= */
.si-header {
	position: sticky;
	top: 0;
	z-index: 9980;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--si-line);
}
.si-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 78px;
}

.si-nav ul { list-style: none; display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; }
.si-nav a {
	font-size: .93rem;
	font-weight: 500;
	color: var(--si-ink);
	text-decoration: none;
	position: relative;
	padding-block: 6px;
	white-space: nowrap;
}
.si-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--si-accent);
	transition: width .3s var(--si-ease);
}
.si-nav a:hover { color: var(--si-accent); }
.si-nav a:hover::after { width: 100%; }

.si-header__actions { display: flex; align-items: center; gap: 16px; }
.si-header__tel {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: .92rem;
	font-weight: 600;
	color: var(--si-ink);
	text-decoration: none;
	white-space: nowrap;
}
.si-header__tel svg { width: 17px; height: 17px; fill: var(--si-accent); }
.si-header__tel:hover { color: var(--si-accent); }
.si-header__cta { padding: 11px 22px; font-size: .88rem; }

.si-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--si-line); border-radius: 9px; background: #fff; cursor: pointer; padding: 0; }
.si-burger span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--si-ink); border-radius: 2px; transition: transform .3s var(--si-ease), opacity .3s var(--si-ease); }
.si-header.is-open .si-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.si-header.is-open .si-burger span:nth-child(2) { opacity: 0; }
.si-header.is-open .si-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
	.si-nav ul { gap: 18px; }
	.si-nav a { font-size: .88rem; }
	.si-header__tel { display: none; }
}

@media (max-width: 960px) {
	.si-burger { display: block; }
	.si-header__cta { display: none; }
	.si-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		border-bottom: 1px solid var(--si-line);
		box-shadow: var(--si-shadow);
		max-height: 0;
		overflow: hidden;
		transition: max-height .4s var(--si-ease);
	}
	.si-header.is-open .si-nav { max-height: 70vh; overflow-y: auto; }
	.si-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 18px; }
	.si-nav li { border-bottom: 1px solid var(--si-line); }
	.si-nav li:last-child { border-bottom: none; }
	.si-nav a { display: block; padding: 14px 0; font-size: 1rem; }
	.si-nav a::after { display: none; }
}

/* Footer grid */
.si-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; }
.si-logo--light { color: #fff; }
.si-logo--light span { color: var(--si-accent-light); }

@media (max-width: 900px) {
	.si-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 560px) {
	.si-footer__grid { grid-template-columns: 1fr; gap: 30px; }
	.si-footer__bottom { flex-direction: column; gap: 8px; }
}

/* The HFE header is sticky; the mobile action bar already reserves space. */
.si-header + * { position: relative; }

/* =========================================================================
   26. Contact form + map
   ========================================================================= */
.si-form {
	background: #fff;
	border: 1px solid var(--si-line);
	border-radius: var(--si-radius-lg);
	padding: 28px 26px;
	box-shadow: var(--si-shadow);
}
.si-form .wpforms-container { margin: 0; }
.si-form .wpforms-field { padding: 0 0 16px; }

.si-map {
	border-radius: var(--si-radius-lg);
	overflow: hidden;
	border: 1px solid var(--si-line);
	box-shadow: var(--si-shadow);
	line-height: 0;
}
.si-map iframe { display: block; width: 100%; }

@media (max-width: 767px) {
	.si-form { padding: 22px 18px; }
	.si-map iframe { height: 300px; }
}

/* Feature icons are inline SVG — see si_icon() in the build library. */
.si-feature__icon svg { width: 21px; height: 21px; fill: var(--si-accent); display: block; }

/* Caption under a split image — used where a production photo stands in for a
   range we do not yet have dedicated photography of. */
.si-split__media figure { margin: 0; }
.si-split__media figcaption {
	font-size: .82rem;
	color: var(--si-muted);
	font-style: italic;
	padding: 12px 16px;
	background: var(--si-cream-2);
	border-top: 1px solid var(--si-line);
	line-height: 1.5;
}