/* =========================================================
   Theme tokens and design system
   This section defines the visual foundation of the theme.
   The variables below control colors, spacing, radius values,
   shadows, transitions, container width, and typography scales.
   Updating these values changes the look of the entire site.
========================================================= */
:root {
  --primary-green: #90EE90;
  --primary-purple: #A020F0;
  --purple-dark: #7015B8;
  --purple-hover: #8B1AD3;
  --green-hover: #7FDD7F;
  --white: #FFFFFF;
  --off-white: #F8F9FA;
  --light-gray: #E9ECEF;
  --medium-gray: #6C757D;
  --dark-gray: #343A40;
  --charcoal: #212529;
  --black: #000000;
  --success: #28A745;
  --warning: #FFC107;
  --error: #DC3545;
  --info: #17A2B8;
  --warm-wood: #D4A574;
  --rich-walnut: #5C4033;
  --natural-oak: #C19A6B;
  --light-birch: #F5E6D3;
  --font-heading: 'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Open Sans', Arial, sans-serif;
  --font-accent: 'Playfair Display', Georgia, serif;
  --text-ink: #1f2429;
  --text-soft: #5e6873;
  --heading-line: 1.08;
  --body-line: 1.68;
  --tracking-heading: -0.045em;
  --tracking-ui: -0.012em;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 50%;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.2);
  --shadow-purple: 0 8px 24px rgba(160,32,240,0.2);
  --shadow-green: 0 8px 24px rgba(144,238,144,0.25);
  --transition-fast: all 0.15s ease;
  --transition-default: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  --container-max: 1200px;
  --nav-height: 80px;
}

/* =========================================================
   Base reset, typography, and reusable utility classes
   This block removes browser inconsistencies and sets the
   default font, text color, line height, and spacing behavior.
   It also defines shared helpers such as containers, section
   spacing, buttons, badges, headings, and text alignment.
   These rules keep the markup consistent across templates.
========================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 0.96rem + 0.16vw, 17px);
  font-weight: 400;
  color: var(--text-ink);
  background: var(--white);
  line-height: var(--body-line);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(160, 32, 240, .25); outline-offset: 3px; }
.container { width: min(calc(100% - 32px), var(--container-max)); margin-inline: auto; }
.section { padding: 96px 0; position: relative; }
.section.compact { padding: 64px 0; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 12px; padding: 7px 12px; border-radius: 999px; background: rgba(160,32,240,.09); color: var(--primary-purple); font: 800 12px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow.green { background: rgba(144,238,144,.25); color: #ffffff; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); line-height: var(--heading-line); letter-spacing: var(--tracking-heading); color: var(--charcoal); margin: 0 0 16px; text-wrap: balance; font-optical-sizing: auto; }
h1 { font-size: clamp(44px, 6.2vw, 80px); font-weight: 800; }
h2 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; }
h3 { font-size: clamp(23px, 2.4vw, 32px); font-weight: 750; }
h4 { font-size: clamp(20px, 1.5vw, 23px); font-weight: 750; }
p { margin: 0 0 18px; color: var(--text-soft); line-height: var(--body-line); }
.lead { font-size: clamp(17px, 1.65vw, 20px); color: var(--text-soft); line-height: 1.72; font-weight: 500; max-width: 72ch; }
.text-muted { color: var(--text-soft); }
.center { text-align: center; }
.section-heading { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.section-heading.left { margin-left: 0; text-align: left; }
.bg-soft { background: var(--off-white); }
.bg-wood { background: linear-gradient(135deg, rgba(245,230,211,.92), rgba(255,255,255,.96)); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 30px; border: 0; border-radius: var(--radius-md); font: 800 14px/1.45 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: var(--transition-default); }
.btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--primary-purple); color: var(--white); box-shadow: var(--shadow-purple); }
.btn-primary:hover { background: var(--purple-hover); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(160,32,240,.32); }
.btn-secondary { background: var(--primary-green); color: var(--charcoal); box-shadow: var(--shadow-green); }
.btn-secondary:hover { background: var(--green-hover); transform: translateY(-2px); }
.btn-outline { background: transparent; border: 2px solid var(--primary-purple); color: var(--primary-purple); padding: 12px 28px; }
.btn-outline:hover { background: var(--primary-purple); color: var(--white); transform: translateY(-2px); }
.btn-ghost { background: rgba(160,32,240,.08); color: var(--primary-purple); }
.btn-ghost:hover { background: rgba(160,32,240,.14); color: var(--purple-hover); }
.icon { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: var(--radius-round); background: rgba(160,32,240,.09); color: var(--primary-purple); flex: 0 0 auto; }
.icon.green { background: rgba(144,238,144,.23); color: #1f7a1f; }
.icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   Header, navigation, and site chrome
   This section styles the sticky top navigation, logo/brand
   area, menu links, phone contact pill, and hamburger button.
   It also includes the overlay used when the mobile menu opens,
   ensuring the menu works correctly on smaller screens.
========================================================= */
.skip-link { position: fixed; top: -60px; left: 16px; background: var(--charcoal); color: var(--white); padding: 10px 14px; border-radius: var(--radius-md); z-index: 2000; }
.skip-link:focus { top: 16px; }
.site-header { position: sticky; top: 0; z-index: 1000; height: var(--nav-height); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(233,236,239,.9); box-shadow: var(--shadow-sm); }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand img { height: 100px; width: auto; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; font-family: var(--font-heading); line-height: 1; }
.brand-text strong { color: var(--primary-purple); font-weight: 800; font-size: 20px; }
.brand-text span { color: var(--medium-gray); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-top: 5px; }
.nav-menu { display: flex; align-items: center; gap: 3px; list-style: none; margin: 0; padding: 0; }
.nav-link { display: inline-flex; align-items: center; height: 44px; padding: 10px 16px; color: var(--dark-gray); font: 800 14px/1 var(--font-heading); letter-spacing: .03em; border-radius: var(--radius-md); position: relative; transition: var(--transition-default); }
.nav-link:hover, .nav-link.active { color: var(--primary-purple); background: rgba(160,32,240,.06); }
.nav-link.active::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 3px; border-radius: 999px; background: var(--primary-green); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.phone-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 999px; color: var(--charcoal); background: var(--light-birch); font-weight: 700; font-size: 14px; }
.phone-pill svg { width: 17px; height: 17px; stroke: var(--primary-purple); fill: none; stroke-width: 2; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 0; background: rgba(160,32,240,.08); border-radius: var(--radius-md); cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--primary-purple); margin: 5px auto; transition: var(--transition-default); }
.nav-overlay { display: none; position: fixed; inset: var(--nav-height) 0 0; background: rgba(0,0,0,.38); opacity: 0; pointer-events: none; transition: var(--transition-default); z-index: 990; }

/* =========================================================
   Hero and page banner sections
   These rules control the large homepage hero area, the
   decorative background treatment, highlight badges, stat cards,
   and the smaller intro banners used on inner pages.
   The layout here is designed to guide the user's attention
   toward the main message and call-to-action first.
========================================================= */
.hero { min-height: calc(100vh - var(--nav-height)); background: linear-gradient(115deg, rgba(33,37,41,.86), rgba(160,32,240,.56)), url('../images/system/hero-collage.webp') center/cover no-repeat; color: var(--white); display: grid; align-items: center; position: relative; overflow: hidden; }
.hero::after { content:''; position:absolute; inset:auto -15% -30% 40%; height: 420px; background: radial-gradient(circle, rgba(144,238,144,.28), transparent 65%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr); gap: 44px; align-items: center; position: relative; z-index: 1; padding: 80px 0; }
.hero h1 { color: var(--white); max-width: 840px; margin-bottom: 18px; }
.hero .lead { color: rgba(255,255,255,.9); max-width: 680px; }
.hero-badges { display:flex; flex-wrap:wrap; gap: 10px; margin: 26px 0 30px; }
.hero-badge { display:inline-flex; align-items:center; gap: 8px; padding: 9px 13px; border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.11); color: var(--white); border-radius: 999px; font-weight: 700; font-size: 14px; backdrop-filter: blur(8px); }
.hero-badge span { width: 9px; height: 9px; border-radius: 50%; background: var(--primary-green); box-shadow: 0 0 0 5px rgba(144,238,144,.15); }
.hero-card { background: rgba(255,255,255,.92); color: var(--charcoal); border: 1px solid rgba(255,255,255,.45); border-radius: 28px; box-shadow: 0 25px 70px rgba(0,0,0,.28); padding: 26px; overflow: hidden; position: relative; }
.hero-card::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(160,32,240,.12), rgba(144,238,144,.16)); pointer-events:none; }
.hero-card > * { position:relative; }
.hero-card .mini-title { font: 800 18px/1.2 var(--font-heading); margin-bottom: 12px; }
.stat-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.stat { background: var(--white); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-md); }
.stat strong { display:block; color: var(--primary-purple); font: 800 30px/1 var(--font-heading); }
.stat span { color: var(--medium-gray); font-size: 13px; font-weight: 700; }
.hero-card img { border-radius: 20px; aspect-ratio: 4/3; width: 100%; object-fit: cover; box-shadow: var(--shadow-lg); }

.page-hero { padding: 88px 0 76px; background: linear-gradient(135deg, rgba(160,32,240,.12), rgba(245,230,211,.9)); position: relative; overflow: hidden; }
.page-hero::after { content:''; position:absolute; right:-100px; top:-120px; width:380px; height:380px; background: radial-gradient(circle, rgba(144,238,144,.56), transparent 68%); }
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 14px; color: var(--medium-gray); font-weight:700; font-size: 14px; }
.breadcrumb a { color: var(--primary-purple); }
.page-hero p { max-width: 760px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid rgba(233,236,239,.85); overflow: hidden; transition: var(--transition-default); }
.card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,.14); }
.service-card { background: var(--off-white); border: 2px solid transparent; border-radius: var(--radius-lg); padding: 32px; text-align: center; transition: var(--transition-default); }
.service-card:hover { border-color: var(--primary-green); background: var(--white); box-shadow: var(--shadow-green); transform: translateY(-6px); }
.service-card .icon { margin: 0 auto 18px; width: 62px; height: 62px; }
.service-card p { color: var(--medium-gray); margin-bottom: 0; }
.category-card { position: relative; min-height: 340px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); display: flex; align-items: flex-end; isolation: isolate; }
.category-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scale(1.01); transition: transform .5s ease; z-index:-2; }
.category-card::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(33,37,41,.08), rgba(33,37,41,.84)); z-index:-1; transition: var(--transition-default); }
.category-card:hover img { transform: scale(1.1); }
.category-card:hover::before { background: linear-gradient(180deg, rgba(160,32,240,.45), rgba(33,37,41,.9)); }
.category-content { padding: 28px; color: var(--white); }
.category-content h3 { color: var(--white); }
.category-content p { color: rgba(255,255,255,.86); }
.category-content .link-line { display:inline-flex; align-items:center; gap: 8px; font-weight:800; color: var(--primary-green); font-family: var(--font-heading); }
.link-line svg { width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:2; }
.feature-list { display:grid; gap:12px; margin: 24px 0 0; padding:0; list-style:none; }
.feature-list li { display:flex; gap: 10px; align-items:flex-start; color: var(--dark-gray); }
.feature-list .tick { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background: rgba(144,238,144,.35); color:#1f7a1f; flex: 0 0 auto; margin-top: 2px; }
.feature-list svg { width:15px; height:15px; fill:none; stroke: currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.split { display:grid; grid-template-columns: minmax(0,1fr) minmax(320px,.9fr); gap: 54px; align-items:center; }
.image-stack { position:relative; min-height: 520px; }
.image-stack img { border-radius: 26px; object-fit:cover; box-shadow: var(--shadow-xl); }
.image-stack .main { width: 82%; height: 460px; }
.image-stack .float { position:absolute; right:0; bottom:0; width: 48%; height: 260px; border: 10px solid var(--white); }
.notice-card { display:flex; gap: 16px; padding: 20px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(160,32,240,.08), rgba(144,238,144,.18)); border: 1px solid rgba(160,32,240,.12); }
.process { counter-reset: steps; }
.process-card { position:relative; padding: 30px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-md); border: 1px solid var(--light-gray); }
.process-card::before { counter-increment: steps; content: counter(steps, decimal-leading-zero); display:block; color: rgba(160,32,240,.14); font: 800 56px/1 var(--font-heading); margin-bottom: 10px; }
.process-card h3 { margin-top:-16px; }

/* =========================================================
   Product catalog, gallery, and content card layouts
   This section styles the filter toolbar, product tiles,
   image hover effects, gallery layout, and card-based content.
   It controls how featured items, collections, and visual
   showcase blocks appear and behave when users interact with them.
========================================================= */
.product-toolbar { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom: 32px; }
.filter-btn { border: 1px solid rgba(160,32,240,.18); background: var(--white); color: var(--dark-gray); border-radius: 999px; padding: 10px 16px; font:800 13px/1 var(--font-heading); cursor:pointer; transition: var(--transition-default); }
.filter-btn:hover, .filter-btn.active { background: var(--primary-purple); color: var(--white); border-color: var(--primary-purple); box-shadow: var(--shadow-purple); }
.product-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow:hidden; transition: var(--transition-default); border: 1px solid var(--light-gray); display:flex; flex-direction:column; }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,.15); }
.product-card .media { position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--off-white); }
.product-card .media img { width:100%; height:100%; object-fit:cover; transition: transform .45s ease; }
.product-card:hover .media img { transform: scale(1.07); }
.product-card .tag { position:absolute; top:14px; left:14px; background: rgba(255,255,255,.9); color: var(--primary-purple); padding:7px 10px; border-radius:999px; font:800 12px/1 var(--font-heading); text-transform:uppercase; letter-spacing:.06em; }
.product-card .content { padding: 24px; display:flex; flex-direction:column; flex:1; }
.product-card p { color: var(--medium-gray); }
.spec-chips { display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 20px; }
.spec-chips span { background: var(--off-white); border: 1px solid var(--light-gray); border-radius:999px; padding: 6px 9px; font-size: 12px; font-weight: 700; color: var(--dark-gray); }
.product-card .btn { margin-top:auto; width:100%; }

.gallery-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.gallery-item { position:relative; border:0; padding:0; background:var(--off-white); border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 1/1.15; cursor: zoom-in; box-shadow: var(--shadow-md); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.gallery-item::after { content: attr(data-title); position:absolute; inset:auto 12px 12px; padding: 10px 12px; color: var(--white); background: rgba(160,32,240,.82); border-radius: var(--radius-md); opacity:0; transform: translateY(8px); transition: var(--transition-default); font:700 13px/1.2 var(--font-heading); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover::after { opacity:1; transform: translateY(0); }
.lightbox { position: fixed !important; inset:0; background: rgba(0,0,0,.76); display:none; align-items:center; justify-content:center; padding: 28px; z-index: 9999; }
.lightbox.open { display:flex; animation: fadeIn .2s ease; }
.lightbox-inner { position:relative; max-width: min(980px, 96vw); max-height: 88vh; }
.lightbox img { max-height: 84vh; border-radius: var(--radius-xl); box-shadow: 0 25px 80px rgba(0,0,0,.45); }
.lightbox-close { position:absolute; top:-18px; right:-18px; width:44px; height:44px; border:0; border-radius: 50%; background: var(--white); color: var(--primary-purple); font-size: 28px; cursor:pointer; box-shadow: var(--shadow-lg); }

.testimonial-card { padding:32px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-md); border:1px solid var(--light-gray); }
.stars { color: #198754; letter-spacing: 3px; margin-bottom: 12px; }
.quote-mark { color: var(--primary-purple); width:44px; height:44px; margin-bottom: 10px; }
.quote-mark svg { width:100%; height:100%; fill:none; stroke: currentColor; stroke-width:1.7; }
.cta-band { background: linear-gradient(135deg, var(--primary-purple), #6f18a9); color: var(--white); border-radius: 30px; padding: 56px; position:relative; overflow:hidden; box-shadow: var(--shadow-xl); }
.cta-band::before { content:''; position:absolute; right:-100px; top:-120px; width:360px; height:360px; background: radial-gradient(circle, rgba(144,238,144,.45), transparent 64%); }
.cta-band * { position:relative; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.86); max-width:720px; }

.contact-layout { display:grid; grid-template-columns: minmax(0,1fr) minmax(320px,.82fr); gap: 34px; align-items:start; }
.contact-form { background: var(--white); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-lg); border:1px solid var(--light-gray); }
.form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.form-field { display:flex; flex-direction:column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
label { font-weight: 800; color: var(--charcoal); font-family: var(--font-heading); font-size: 14px; }
input, textarea, select { width:100%; min-height:48px; padding:12px 16px; border:1px solid var(--light-gray); border-radius: var(--radius-md); background: var(--white); font: 500 16px/1.5 var(--font-body); transition: var(--transition-default); }
textarea { min-height: 132px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--primary-purple); box-shadow: 0 0 0 3px rgba(160,32,240,.1); outline:none; }
.form-note { margin: 13px 0 0; color: var(--medium-gray); font-size: 13px; }
.contact-card { display:flex; gap: 16px; padding: 20px; border-radius: var(--radius-lg); background: var(--white); border:1px solid var(--light-gray); box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.contact-card p { margin:0; color: var(--medium-gray); }
.contact-card strong { font-family: var(--font-heading); display:block; margin-bottom: 4px; }
.map-embed { overflow:hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--light-gray); background: var(--off-white); min-height: 360px; }
.map-embed iframe { width:100%; height:360px; border:0; display:block; }

/* =========================================================
   Footer and site-wide closing elements
   This block styles the footer columns, text hierarchy, social
   icons, and the floating back-to-top button.
   It also defines the last visual details that help complete the
   user journey when visiting the bottom of the page.
========================================================= */
.footer { background: var(--charcoal); color: var(--off-white); padding: 64px 0 30px; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; }
.footer .brand img { height: 100px; }
.footer h3, .footer h4 { color: var(--primary-green); font-size: 18px; margin-bottom: 18px; }
.footer p, .footer li { color: rgba(248,249,250,.78); }
.footer ul { list-style:none; margin:0; padding:0; display:grid; gap: 10px; }
.footer a { color: rgba(248,249,250,.82); transition: var(--transition-default); }
.footer a:hover { color: var(--primary-green); }
.footer-bottom { border-top:1px solid var(--dark-gray); margin-top: 38px; padding-top: 22px; display:flex; justify-content:space-between; gap: 18px; flex-wrap:wrap; font-size: 14px; color: rgba(248,249,250,.68); }
.socials { display:flex; gap:10px; margin-top: 16px; }
.socials a { display:grid; place-items:center; width:40px; height:40px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--primary-green); font-weight: 800; }
.back-to-top { position: fixed !important; right: 18px; bottom: 18px; width:46px; height:46px; border:0; border-radius:50%; background: var(--primary-purple); color: var(--white); box-shadow: var(--shadow-lg); cursor:pointer; opacity:0; transform: translateY(12px); pointer-events:none; transition: var(--transition-default); z-index: 900; }
.back-to-top.visible { opacity:1; transform: translateY(0); pointer-events:auto; }
.back-to-top svg { width:22px; height:22px; stroke: currentColor; fill:none; stroke-width:2; }

.reveal { opacity:0; transform: translateY(32px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity:1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }

/* =========================================================
   Responsive breakpoints
   These media queries adjust the layout for smaller screens.
   They change grid behavior, hide or stack elements, resize
   spacing, and improve usability for tablets and mobile phones.
   The goal is to preserve readability and navigation quality
   without changing the content structure.
========================================================= */
@media (max-width: 1100px) {
  .phone-pill { display:none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --nav-height: 74px; }
  .nav-menu { position: fixed;  top: 0; right: 100%; width: min(86vw, 310px); height: calc(100vh - var(--nav-height)); background: var(--white); box-shadow: -4px 0 20px rgba(0,0,0,.18); flex-direction: column; align-items: stretch; padding: 20px; transition: right .3s ease; }
  .nav-menu.open { right:0; }
  .nav-link { height:auto; padding: 15px 16px; border-bottom: 1px solid var(--light-gray); border-radius: 0; }
  .nav-toggle { display:block; }
  .nav-overlay { display:block; }
  body.nav-open .nav-overlay { opacity:1; pointer-events:auto; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero-grid, .split, .contact-layout { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-grid { padding: 64px 0; }
  .hero-card { max-width: 560px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .section { padding: 60px 0; }
  .section.compact { padding: 46px 0; }
  .brand-text { display:none; }
  .brand img { height: 70px; }
  .grid-2, .grid-3, .grid-4, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero .btn-row .btn, .cta-band .btn-row .btn { width:100%; }
  .hero-card { padding: 18px; border-radius: 22px; }
  .stat-grid { grid-template-columns: 1fr; }
  .image-stack { min-height: auto; }
  .image-stack .main, .image-stack .float { position:relative; width:100%; height:auto; aspect-ratio: 4/3; right:auto; bottom:auto; border:0; margin-top: 14px; }
  .cta-band { padding: 34px 24px; border-radius: 22px; }
  .contact-form { padding: 24px; }
  .footer-bottom { flex-direction:column; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .gallery-item { aspect-ratio: 1/1.25; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity:1; transform:none; }
}


/* ---------------------------------------------------------
   Feel Good V1.3 modern motion layer
   This section adds the softer visual atmosphere of the theme.
   It includes animated background gradients, scroll progress,
   pointer glow effects, glassy surfaces, and hover transitions.
   The intent is to make the page feel more premium and dynamic
   while keeping the layout readable and accessible.
--------------------------------------------------------- */
:root {
  --surface-glass: rgba(255,255,255,.78);
  --surface-glass-strong: rgba(255,255,255,.9);
  --border-soft: rgba(160,32,240,.12);
  --ease-out-smooth: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.2, .8, .2, 1);
}
body {
  background:
    radial-gradient(circle at 8% 12%, rgba(160,32,240,.12), transparent 32rem),
    radial-gradient(circle at 92% 8%, rgba(144,238,144,.22), transparent 34rem),
    linear-gradient(180deg, #fff 0%, #fbfafc 46%, #f8f9fa 100%);
  isolation: isolate;
}
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 26%, rgba(160,32,240,.12), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(144,238,144,.22), transparent 30%),
    radial-gradient(circle at 50% 82%, rgba(212,165,116,.13), transparent 34%);
  filter: blur(8px);
  animation: ambientShift 18s var(--ease-out-smooth) infinite alternate;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .10;
  background-image:
    linear-gradient(90deg, rgba(33,37,41,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(33,37,41,.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 12%, #000 0, transparent 72%);
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary-purple), var(--primary-green), var(--warm-wood));
  z-index: 3000;
  box-shadow: 0 0 18px rgba(160,32,240,.32);
}
.pointer-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(160,32,240,.18) 0%, rgba(144,238,144,.14) 36%, rgba(212,165,116,.10) 50%, transparent 72%);
  filter: blur(18px);
  mix-blend-mode: multiply;
  transition: opacity .35s ease;
  will-change: transform;
}
body.has-pointer .pointer-glow { opacity: 1; }
.site-header,  .footer, .back-to-top, .lightbox, .nav-overlay { position: relative; z-index: 1; }
.site-header {
  background: rgba(255,255,255,.76);
  border-bottom: 1px solid rgba(160,32,240,.10);
  box-shadow: 0 10px 30px rgba(33,37,41,.07);
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,32,240,.34), rgba(144,238,144,.44), transparent);
}
.nav-link { overflow: hidden; }
.nav-link::before {
  content:'';
  position:absolute;
  inset: 8px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(160,32,240,.10), rgba(144,238,144,.16));
  transform: scale(.72);
  opacity:0;
  transition: transform .35s var(--ease-out-smooth), opacity .35s var(--ease-out-smooth);
  z-index:-1;
}
.nav-link:hover::before, .nav-link.active::before { transform: scale(1); opacity:1; }
.btn {
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.btn::before {
  content:'';
  position:absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.42) 48%, transparent 60% 100%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out-smooth);
}
.btn:hover::before { transform: translateX(120%); }
.btn > *, .btn svg { position: relative; z-index: 1; }
.hero, .page-hero { isolation: isolate; }
.hero::before, .page-hero::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.22), transparent 26rem);
  opacity:.75;
  transition: opacity .3s ease;
  z-index:0;
}
.page-hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(245,230,211,.78)),
    radial-gradient(circle at 82% 18%, rgba(160,32,240,.18), transparent 28rem),
    radial-gradient(circle at 14% 78%, rgba(144,238,144,.24), transparent 22rem);
  border-bottom: 1px solid rgba(160,32,240,.08);
}
.page-hero::after { animation: floatOrb 9s ease-in-out infinite alternate; }
.section-heading h2, .page-hero h1 { text-wrap: balance; }
.card, .service-card, .process-card, .product-card, .testimonial-card, .contact-form, .contact-card, .hero-card, .cta-band {
  border-color: rgba(160,32,240,.10);
  backdrop-filter: blur(18px);
}
.card, .service-card, .process-card, .product-card, .testimonial-card, .contact-form, .contact-card {
  background: var(--surface-glass-strong);
  box-shadow: 0 16px 40px rgba(33,37,41,.08);
}
.card:hover, .service-card:hover, .process-card:hover, .product-card:hover, .testimonial-card:hover, .contact-card:hover {
  box-shadow: 0 24px 60px rgba(33,37,41,.13), 0 0 0 1px rgba(160,32,240,.08) inset;
}
.product-toolbar {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 8px;
  border: 1px solid rgba(160,32,240,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 38px rgba(33,37,41,.08);
  backdrop-filter: blur(18px);
}
.filter-btn {
  min-height: 42px;
  border: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}
.filter-btn::after {
  content:'';
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary-purple), #7b1fc9);
  transform: scale(.82);
  opacity:0;
  transition: transform .28s var(--ease-out-smooth), opacity .28s var(--ease-out-smooth);
  z-index:-1;
}
.filter-btn:hover, .filter-btn.active, .filter-btn[aria-selected="true"] {
  background: transparent;
  color: var(--white);
  box-shadow: none;
}
.filter-btn:hover::after, .filter-btn.active::after, .filter-btn[aria-selected="true"]::after {
  opacity:1;
  transform: scale(1);
}
.catalog-status {
  text-align:center;
  margin: -14px 0 28px;
  color: var(--medium-gray);
  font-weight: 700;
  font-size: 14px;
}
.product-card {
  position: relative;
  border: 1px solid rgba(160,32,240,.10);
  transform-origin: 50% 70%;
  will-change: transform, opacity, filter;
}
.product-card::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(160,32,240,.42), rgba(144,238,144,.46), rgba(212,165,116,.34));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity:0;
  pointer-events:none;
  transition: opacity .35s ease;
}
.product-card:hover::before { opacity:1; }
.product-card .media::after {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 45%, rgba(33,37,41,.34));
  opacity:.72;
  pointer-events:none;
}
.product-card.is-filtered-out, .gallery-item.is-filtered-out {
  opacity: 0;
  transform: translateY(12px) scale(.96);
  filter: blur(8px);
  pointer-events: none;
}
.product-card.is-hidden, .gallery-item.is-hidden { display: none !important; }
.gallery-item { transition: opacity .25s ease, transform .25s var(--ease-out-smooth), filter .25s ease, box-shadow .35s ease; }
.reveal {
  opacity: 0;
  transform: translate3d(0, 46px, 0) scale(.985);
  filter: blur(14px);
  transition:
    opacity .95s var(--ease-out-smooth),
    transform .95s var(--ease-out-smooth),
    filter .95s var(--ease-out-smooth);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
.reveal.delay-1 { --reveal-delay: 90ms; }
.reveal.delay-2 { --reveal-delay: 180ms; }
.reveal.delay-3 { --reveal-delay: 270ms; }
.category-card, .image-stack img, .hero-card img, .gallery-item, .product-card .media img { will-change: transform; }
.site-version {
  display:inline-flex;
  align-items:center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(144,238,144,.13);
  border: 1px solid rgba(144,238,144,.28);
  color: var(--primary-green);
  font: 800 12px/1 var(--font-heading);
  letter-spacing: .08em;
}
@keyframes ambientShift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 1%, 0) scale(1.04); }
  100% { transform: translate3d(1%, 3%, 0) scale(1.02); }
}
@keyframes floatOrb {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-32px,36px,0) scale(1.09); }
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover { transform: translateY(-12px) scale(1.012); }
  .category-card:hover { transform: translateY(-4px); }
}
@media (max-width: 700px) {
  .product-toolbar { border-radius: 24px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .filter-btn { flex: 0 0 auto; }
  .pointer-glow { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, .page-hero::after { animation: none !important; }
  .pointer-glow, .scroll-progress { display:none !important; }
  .reveal { opacity:1 !important; transform:none !important; filter:none !important; }
}

.catalog-metrics { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top: 18px; }
.catalog-metrics span { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:999px; background: rgba(255,255,255,.72); border:1px solid rgba(160,32,240,.12); box-shadow:0 10px 26px rgba(33,37,41,.06); font:800 13px/1 var(--font-heading); color:var(--dark-gray); }
.catalog-metrics span::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--primary-green); box-shadow:0 0 0 5px rgba(144,238,144,.16); }

/* V1.3 compatibility refinements */
.nav-link, .filter-btn { z-index: 0; }
.product-card::before { -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; }

/* ---------------------------------------------------------
   Feel Good V1.3 animated hero slider
   This block powers the interactive hero carousel shown on the
   homepage. It controls slide transitions, image movement,
   overlay gradients, progress indicators, arrows, and dots.
   The animation is designed to create a more immersive landing
   experience without overwhelming the content.
--------------------------------------------------------- */
.hero-slider {
  min-height: calc(100vh - var(--nav-height));
  padding: 0;
  display: block;
  background: #111418;
  color: var(--white);
  overflow: hidden;
  --hero-scroll-shift: 0px;
  --hero-wheel-shift: 0px;
  --hero-pointer-x: 0px;
}
.hero-slider::after {
  content: '';
  position: absolute;
  inset: auto -15% -28% 40%;
  height: 460px;
  background: radial-gradient(circle, rgba(144,238,144,.36), transparent 66%);
  filter: blur(2px);
  z-index: 3;
  pointer-events: none;
}
.hero-slider-track {
  min-height: calc(100vh - var(--nav-height));
  position: relative;
  isolation: isolate;
}
.hero-slide {
  position: absolute;
  inset: 0;
  min-height: calc(100vh - var(--nav-height));
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(7%,0,0) scale(1.02);
  transition:
    opacity 900ms var(--ease-out-smooth),
    visibility 900ms var(--ease-out-smooth),
    transform 1100ms var(--ease-out-smooth);
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
  z-index: 2;
}
.hero-slide.is-prev { transform: translate3d(-7%,0,0) scale(1.03); }
.hero-slide.is-next { transform: translate3d(7%,0,0) scale(1.03); }
.hero-slide-img {
  position: absolute;
  inset: -4% -7%;
  width: 114%;
  height: 108%;
  max-width: none;
  object-fit: cover;
  transform: translate3d(calc(var(--hero-scroll-shift) + var(--hero-wheel-shift) + var(--hero-pointer-x)),0,0) scale(1.04);
  transition: transform 850ms var(--ease-out-smooth), filter 850ms var(--ease-out-smooth);
  filter: saturate(1.02) contrast(1.02) brightness(.82);
  will-change: transform;
  z-index: 0;
}
.hero-slide.is-active .hero-slide-img {
  animation: heroImageBreath 8s ease-in-out infinite alternate;
}
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(16,18,20,.88) 0%, rgba(33,37,41,.78) 38%, rgba(160,32,240,.36) 72%, rgba(16,18,20,.58) 100%),
    radial-gradient(circle at var(--mx, 70%) var(--my, 24%), rgba(144,238,144,.24), transparent 28rem),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.38));
}
.hero-slide-content {
  position: relative;
  z-index: 4;
  min-height: calc(100vh - var(--nav-height));
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(280px, 390px);
  align-items: center;
  gap: 44px;
  padding: 86px 0 120px;
}
.hero-slider .hero-copy {
  max-width: 780px;
  opacity: 0;
  transform: translate3d(-34px, 22px, 0);
  filter: blur(10px);
  transition: opacity 900ms var(--ease-out-smooth) 120ms, transform 900ms var(--ease-out-smooth) 120ms, filter 900ms var(--ease-out-smooth) 120ms;
}
.hero-slide.is-active .hero-copy {
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}
.hero-slider h1,
.hero-slider h2 {
  color: var(--white);
  max-width: 880px;
  margin-bottom: 18px;
  text-wrap: balance;
  text-shadow: 0 12px 38px rgba(0,0,0,.28);
}
.hero-slider h2 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 800; }
.hero-slider .lead {
  color: rgba(255,255,255,.91);
  max-width: 700px;
  text-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.hero-glass-panel {
  align-self: end;
  margin-bottom: 14px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 28px;
  color: var(--white);
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  backdrop-filter: blur(18px);
  box-shadow: 0 26px 70px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22);
  opacity: 0;
  transform: translate3d(32px, 24px, 0) scale(.96);
  transition: opacity 900ms var(--ease-out-smooth) 260ms, transform 900ms var(--ease-out-smooth) 260ms;
}
.hero-slide.is-active .hero-glass-panel {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}
.hero-glass-panel .panel-kicker {
  display: inline-flex;
  margin-bottom: 11px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #dffdde;
  background: rgba(144,238,144,.14);
  border: 1px solid rgba(144,238,144,.22);
  font: 800 12px/1 var(--font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-glass-panel strong {
  display: block;
  color: var(--white);
  font: 800 clamp(22px, 3vw, 32px)/1.1 var(--font-heading);
  letter-spacing: -.04em;
  margin-bottom: 10px;
}
.hero-glass-panel p { color: rgba(255,255,255,.84); margin-bottom: 0; }
.hero-controls {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 7;
  display: grid;
  grid-template-columns: auto auto auto minmax(120px, 260px);
  align-items: center;
  justify-content: start;
  gap: 12px;
  pointer-events: none;
}
.hero-arrow,
.hero-dot,
.hero-progress { pointer-events: auto; }
.hero-arrow {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: var(--white);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: transform .3s var(--ease-out-smooth), background .3s var(--ease-out-smooth), border-color .3s var(--ease-out-smooth);
}
.hero-arrow:hover {
  transform: translateY(-2px);
  background: rgba(160,32,240,.35);
  border-color: rgba(144,238,144,.42);
}
.hero-arrow svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-dots {
  min-height: 48px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
}
.hero-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.46);
  cursor: pointer;
  transition: width .32s var(--ease-out-smooth), background .32s var(--ease-out-smooth), transform .32s var(--ease-out-smooth);
}
.hero-dot.active {
  width: 38px;
  background: linear-gradient(90deg, var(--primary-green), var(--primary-purple));
  box-shadow: 0 0 18px rgba(144,238,144,.34);
}
.hero-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}
.hero-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--primary-green), var(--white), var(--primary-purple));
}
.hero-scroll-rail {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: grid;
  gap: 12px;
  pointer-events: none;
}
.hero-scroll-rail span {
  display: block;
  width: 3px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  animation: railPulse 2.7s ease-in-out infinite;
}
.hero-scroll-rail span:nth-child(2) { animation-delay: .28s; }
.hero-scroll-rail span:nth-child(3) { animation-delay: .56s; }
@keyframes heroProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes railPulse {
  0%, 100% { opacity: .28; transform: translateX(0) scaleY(.7); }
  50% { opacity: .95; transform: translateX(-8px) scaleY(1); }
}
@keyframes heroImageBreath {
  from { filter: saturate(1.02) contrast(1.02) brightness(.82); }
  to { filter: saturate(1.12) contrast(1.06) brightness(.9); }
}
@media (max-width: 900px) {
  .hero-slide-content {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 68px 0 126px;
  }
  .hero-glass-panel { max-width: 560px; align-self: auto; }
  .hero-controls { grid-template-columns: auto auto auto; }
  .hero-progress { display: none; }
  .hero-scroll-rail { right: 18px; opacity: .5; }
}
@media (max-width: 700px) {
  .hero-slider,
  .hero-slider-track,
  .hero-slide,
  .hero-slide-content { min-height: calc(100svh - var(--nav-height)); }
  .hero-slide-content { padding: 56px 0 112px; }
  .hero-slider h1,
  .hero-slider h2 { font-size: clamp(34px, 11vw, 48px); }
  .hero-glass-panel { display: none; }
  .hero-controls { bottom: 24px; width: min(calc(100% - 32px), var(--container-max)); justify-content: center; display: none; }
  .hero-arrow { width: 44px; height: 44px; }
  .hero-scroll-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide-img,
  .hero-slider .hero-copy,
  .hero-glass-panel { animation: none !important; transition: none !important; transform: none !important; filter: none !important; }
  .hero-slide:not(.is-active) { display: none; }
  .hero-progress span,
  .hero-scroll-rail span { animation: none !important; }
}

/* ---------------------------------------------------------
   Feel Good V1.6 premium readability typography layer
   This section improves text readability and visual hierarchy.
   It sets better line lengths, font weight balance, spacing,
   and typographic treatment for headings, body copy, labels,
   buttons, and content blocks across the site.
--------------------------------------------------------- */
:root {
  --measure: 68ch;
  --measure-wide: 78ch;
}
body {
  letter-spacing: -0.003em;
}
p, li, .product-card p, .service-card p, .category-content p, .contact-card p, .footer p, .footer li {
  font-family: var(--font-body);
  line-height: 1.68;
}
h1 strong, h2 strong, h3 strong {
  font-weight: 800;
}
.section-heading p,
.page-hero p,
.hero-slider .lead,
.hero .lead,
.cta-band p,
.testimonial-card p {
  max-width: var(--measure-wide);
}
.eyebrow,
.btn,
.nav-link,
.filter-btn,
.product-card .tag,
.catalog-metrics span,
.site-version,
.hero-badge,
.phone-pill,
label,
.spec-chips span {
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-ui);
}
.eyebrow,
.product-card .tag,
.site-version,
.hero-glass-panel .panel-kicker {
  letter-spacing: .075em;
}
.btn {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .025em;
}
.nav-link {
  font-size: 14.5px;
  font-weight: 800;
}
.brand-text strong {
  letter-spacing: -0.04em;
}
.brand-text span {
  letter-spacing: .14em;
  font-weight: 800;
}
.hero-slider h1,
.hero-slider h2,
.hero h1 {
  line-height: .98;
  letter-spacing: -0.065em;
}
.hero-slider .lead,
.hero .lead {
  font-size: clamp(18px, 1.65vw, 22px);
  line-height: 1.66;
  font-weight: 500;
  color: rgba(255,255,255,.9);
}
.hero-glass-panel strong {
  letter-spacing: -0.055em;
}
.page-hero h1,
.section-heading h2,
.cta-band h2 {
  letter-spacing: -0.055em;
}
.product-card h3,
.service-card h3,
.category-content h3,
.process-card h3 {
  letter-spacing: -0.035em;
}
.product-card p,
.service-card p,
.process-card p,
.contact-card p,
.footer p,
.footer li {
  font-size: clamp(15.5px, 0.94rem + .08vw, 16.5px);
}
.spec-chips span {
  font-size: 12.5px;
  font-weight: 750;
}
input, textarea, select {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.5;
}
::placeholder {
  color: #7b8490;
  opacity: 1;
}
.entry-content,
.page-content {
  font-family: var(--font-body);
  line-height: 1.72;
  color: var(--text-soft);
}
.entry-content p,
.page-content p {
  max-width: var(--measure);
}
.entry-content a,
.page-content a {
  color: var(--primary-purple);
  font-weight: 700;
  text-underline-offset: 0.18em;
}
@media (max-width: 700px) {
  body { font-size: 16px; line-height: 1.64; }
  h1 { font-size: clamp(38px, 11vw, 50px); }
  h2 { font-size: clamp(30px, 8vw, 40px); }
  .hero-slider h1,
  .hero-slider h2,
  .hero h1 { letter-spacing: -0.055em; line-height: 1.02; }
  .lead, .hero-slider .lead, .hero .lead { font-size: 17px; line-height: 1.62; }
}