/* ============================================================
Parth Kitchen Industries — Design Tokens & Base
============================================================ */
/* Font loading moved to in each page — an @import
here would force the browser to download, parse and execute this whole
stylesheet before it even discovers the font request, adding a full extra
round-trip to every page load (and to whatever Core Web Vitals score). */
:root{
/* Color — Earthy Editorial, brand-derived */
--color-bg-base: #FBF7F1;
--color-bg-raised: #FFFFFF;
--color-bg-sunken: #F3EDE3;
--color-bg-dark: #1A1512;
--color-bg-dark-raised: #241D18;
--color-text-primary: #211C17;
--color-text-secondary: #6B6259;
--color-text-inverse: #F7F1E8;
--color-text-inverse-muted: #C9BFB2;
--color-accent: #E17A1D;
--color-accent-dark: #C4650E;
--color-accent-light: #FBEADA;
--color-accent-ink: #7A3E08;
--color-border: #E7DFD1;
--color-border-strong: #D8CBB3;
--color-border-dark: #3A322B;
/* Spacing (8pt) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* Radius */
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Shadow */
--shadow-sm: 0 1px 2px rgba(26,21,18,0.06), 0 1px 1px rgba(26,21,18,0.04);
--shadow-md: 0 8px 24px -8px rgba(26,21,18,0.18);
--shadow-lg: 0 24px 48px -12px rgba(26,21,18,0.28);
--shadow-accent: 0 12px 28px -8px rgba(196,101,14,0.45);
/* Type */
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--container: 1180px;
}
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
*, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
margin: 0;
font-family: var(--font-body);
background: var(--color-bg-base);
color: var(--color-text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-primary); }
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
section{ position: relative; }
.container{
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--space-6);
}
.eyebrow{
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-accent-dark);
}
.eyebrow::before{
content: "";
width: 24px;
height: 2px;
background: var(--color-accent);
display: inline-block;
}
.section-head{
max-width: 680px;
margin: 0 0 var(--space-12);
}
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{
font-size: clamp(28px, 4vw, 42px);
margin-top: var(--space-3);
line-height: 1.15;
}
.section-head p{
margin-top: var(--space-4);
color: var(--color-text-secondary);
font-size: 17px;
line-height: 1.7;
}
/* Buttons */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 14px 28px;
border-radius: var(--radius-full);
font-weight: 700;
font-size: 15px;
border: 1px solid transparent;
transition: transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease;
white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
background: var(--color-accent);
color: #fff;
box-shadow: var(--shadow-accent);
}
.btn-primary:hover{ background: var(--color-accent-dark); transform: translateY(-2px); }
.btn-secondary{
background: transparent;
color: var(--color-text-inverse);
border-color: rgba(247,241,232,0.35);
}
.btn-secondary:hover{ background: rgba(247,241,232,0.1); border-color: rgba(247,241,232,0.6); }
.btn-outline{
background: transparent;
border-color: var(--color-border-strong);
color: var(--color-text-primary);
}
.btn-outline:hover{ border-color: var(--color-accent); color: var(--color-accent-dark); }
.btn-sm{ padding: 10px 20px; font-size: 13px; }
.btn-block{ width: 100%; }
/* ============================================================
Header
============================================================ */
.site-header{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: var(--space-4) 0;
transition: background 250ms ease, box-shadow 250ms ease, padding 250ms ease;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-6); }
.site-header.is-scrolled{
background: rgba(251,247,241,0.9);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--color-border), 0 8px 24px -12px rgba(26,21,18,0.15);
padding: var(--space-3) 0;
}
.brand{ display:flex; align-items:center; gap: var(--space-3); }
.brand-mark{
width: 44px; height: 44px; border-radius: var(--radius-md);
background: var(--color-bg-dark);
display:flex; align-items:center; justify-content:center;
overflow: hidden;
flex-shrink: 0;
}
.brand-mark img{ width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
/* Header brand: the logo artwork already carries the full wordmark, so the
header shows the logo alone (no separate text) and can run it much larger. */
.brand-logo{ height: 60px; width: auto; display:block; transition: height 250ms ease; }
.site-header.is-scrolled .brand-logo{ height: 50px; }
.brand-text .brand-name{ font-family: var(--font-display); font-weight:700; font-size:17px; letter-spacing: 0.01em; color: var(--color-text-inverse); transition: color 250ms ease; }
.brand-text .brand-sub{ font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color: var(--color-text-inverse-muted); font-weight:600; margin-top:2px; transition: color 250ms ease; }
.nav-desktop{ display:flex; align-items:center; gap: var(--space-8); }
.nav-desktop a{
font-size: 14.5px; font-weight: 600; color: var(--color-text-inverse);
position: relative; padding: 4px 0; transition: color 250ms ease;
}
.nav-desktop a::after{
content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
background: var(--color-accent); transform: scaleX(0); transform-origin: left;
transition: transform 200ms ease;
}
.nav-desktop a:hover::after{ transform: scaleX(1); }
.header-actions{ display:flex; align-items:center; gap: var(--space-4); }
.header-call{ display:flex; align-items:center; gap: var(--space-2); font-weight:700; font-size:14px; color: var(--color-text-inverse); transition: color 250ms ease; }
.header-call svg{ color: var(--color-accent); flex-shrink:0; }
.header-call .call-sub{ display:block; font-size:11px; color: var(--color-text-inverse-muted); font-weight:500; transition: color 250ms ease; }
/* Scrolled state: header gets a light backdrop, so text switches to dark */
.site-header.is-scrolled .brand-text .brand-name,
.site-header.is-scrolled .nav-desktop a,
.site-header.is-scrolled .header-call{ color: var(--color-text-primary); }
.site-header.is-scrolled .brand-text .brand-sub,
.site-header.is-scrolled .header-call .call-sub{ color: var(--color-text-secondary); }
.site-header.is-scrolled .nav-toggle{ border-color: var(--color-border-strong); }
.nav-toggle{
display:none; width:44px; height:44px; border-radius: var(--radius-md);
border: 1px solid rgba(247,241,232,0.3); background: rgba(247,241,232,0.06);
align-items:center; justify-content:center; flex-shrink:0; transition: all 250ms ease;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
content:""; display:block; width:18px; height:2px; background: var(--color-text-inverse); position:relative; transition: all 200ms ease;
}
.site-header.is-scrolled .nav-toggle{ background: var(--color-bg-raised); border-color: var(--color-border-strong); }
.site-header.is-scrolled .nav-toggle span, .site-header.is-scrolled .nav-toggle span::before, .site-header.is-scrolled .nav-toggle span::after{ background: var(--color-text-primary); }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.is-open span{ background: transparent; }
.nav-toggle.is-open span::before{ top:0; transform: rotate(45deg); }
.nav-toggle.is-open span::after{ top:0; transform: rotate(-45deg); }
.nav-mobile{
display:none;
position: fixed; inset: 0; top: 0;
background: var(--color-bg-dark);
z-index: 99;
padding: 100px var(--space-6) var(--space-10);
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease, transform 220ms ease;
}
.nav-mobile.is-open{ opacity:1; transform: translateY(0); pointer-events:auto; }
.nav-mobile ul{ display:flex; flex-direction:column; gap: var(--space-2); }
.nav-mobile a{ display:block; padding: var(--space-4) 0; font-family: var(--font-display); font-size: 26px; font-weight:600; color: var(--color-text-inverse); border-bottom: 1px solid var(--color-border-dark); }
.nav-mobile .header-call{ margin-top: var(--space-8); color: var(--color-text-inverse); }
/* ============================================================
Hero
============================================================ */
.hero{
position: relative;
padding: 160px 0 var(--space-20);
background: var(--color-bg-dark);
overflow: hidden;
}
.hero-grid{
position: relative; z-index: 2;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--space-16);
align-items: center;
}
.hero-content{ max-width: 560px; }
.hero-badge{
display:inline-flex; align-items:center; gap: var(--space-2);
background: rgba(247,241,232,0.1); border: 1px solid rgba(247,241,232,0.2);
padding: 8px 16px; border-radius: var(--radius-full);
font-size: 12.5px; font-weight:600; letter-spacing:0.04em; color: var(--color-text-inverse-muted);
margin-bottom: var(--space-6);
}
.hero-badge strong{ color: var(--color-accent); font-weight:800; }
.hero h1{
font-size: clamp(36px, 4.4vw, 58px);
line-height: 1.08;
color: var(--color-text-inverse);
}
.hero h1 em{ font-style: italic; color: var(--color-accent); }
.hero p.lead{
margin-top: var(--space-6);
font-size: 17px;
line-height: 1.7;
color: var(--color-text-inverse-muted);
max-width: 480px;
}
.hero-ctas{ display:flex; gap: var(--space-4); margin-top: var(--space-10); flex-wrap:wrap; }
/* ---------- Hero image (right column) ---------- */
.hero-media{ position: relative; }
.hero-media-frame{
border-radius: var(--radius-xl); overflow:hidden;
box-shadow: var(--shadow-lg); aspect-ratio: 4/3.1;
}
.hero-media-frame img{ width:100%; height:100%; object-fit:cover; }
.hero-media-badge{
position:absolute; bottom:-22px; left:-22px; z-index:2;
background: var(--color-bg-raised); border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-md);
text-align:center;
}
.hero-media-badge .n{ font-family: var(--font-display); font-size: 30px; font-weight:800; color: var(--color-accent); line-height:1; }
.hero-media-badge .n span{ font-size: 22px; }
.hero-media-badge .t{ font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color: var(--color-text-secondary); margin-top:4px; line-height:1.4; }
.hero-stats{
position: relative; z-index: 2;
display:grid; grid-template-columns: repeat(4,1fr);
gap: var(--space-6);
margin-top: var(--space-16);
padding-top: var(--space-10);
border-top: 1px solid rgba(247,241,232,0.14);
}
.hero-stat .num{ font-family: var(--font-display); font-size: clamp(26px,3vw,36px); font-weight:800; color: var(--color-text-inverse); }
.hero-stat .num .suffix{ color: var(--color-accent); }
.hero-stat .label{ margin-top: 4px; font-size: 12.5px; color: var(--color-text-inverse-muted); font-weight:600; letter-spacing:0.03em; }
/* ============================================================
Marquee strip
============================================================ */
.strip{
background: var(--color-accent);
color: #fff;
overflow: hidden;
padding: var(--space-3) 0;
}
.strip-track{
display:flex; gap: var(--space-10); width: max-content;
animation: marquee 26s linear infinite;
}
.strip-track span{ font-weight:700; font-size:13.5px; letter-spacing:0.06em; text-transform:uppercase; display:flex; align-items:center; gap: var(--space-10); white-space:nowrap; }
.strip-track span::after{ content:"◆"; opacity:0.6; margin-left: var(--space-10); font-size:10px; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
/* ============================================================
About
============================================================ */
.about{ padding: var(--space-24) 0; }
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items:center; }
.about-media{ position:relative; }
.about-media-main{ border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3.1;}
.about-media-main img{ width:100%; height:100%; object-fit:cover; }
.about-media-float{
position:absolute; width: 46%; border-radius: var(--radius-lg); overflow:hidden;
box-shadow: var(--shadow-lg); border: 6px solid var(--color-bg-base);
bottom: -8%; right: -10%;
}
.about-media-badge{
position:absolute; top:-24px; left:-24px;
background: var(--color-bg-raised); border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-md);
text-align:center; z-index:2;
}
.about-media-badge .n{ font-family: var(--font-display); font-size: 34px; font-weight:800; color: var(--color-accent); line-height:1; }
.about-media-badge .t{ font-size:11.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color: var(--color-text-secondary); margin-top:4px; }
.about-body p{ color: var(--color-text-secondary); font-size:16px; margin-top: var(--space-4); }
.about-body p:first-of-type{ margin-top: var(--space-5); }
.about-pillars{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-8); }
.pillar{ display:flex; gap: var(--space-3); align-items:flex-start; }
.pillar-icon{
width:40px; height:40px; border-radius: var(--radius-md); background: var(--color-accent-light);
display:flex; align-items:center; justify-content:center; color: var(--color-accent-dark); flex-shrink:0;
}
.pillar h4{ font-size:15px; font-family: var(--font-body); font-weight:700; }
.pillar p{ font-size:13.5px; color: var(--color-text-secondary); margin-top:2px; }
/* ============================================================
Products
============================================================ */
.products{ padding: var(--space-24) 0; background: var(--color-bg-sunken); }
.tabs{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-bottom: var(--space-12); }
.tab-btn{
padding: 12px 22px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong);
background: var(--color-bg-raised); font-weight:700; font-size:14px; color: var(--color-text-secondary);
transition: all 200ms ease;
}
.tab-btn:hover{ border-color: var(--color-accent); color: var(--color-accent-dark); }
.tab-btn.is-active{ background: var(--color-bg-dark); border-color: var(--color-bg-dark); color: var(--color-text-inverse); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation: fadeUp 400ms ease both; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform:translateY(0);} }
.product-intro{ display:grid; grid-template-columns: 1.1fr 1.4fr; gap: var(--space-10); align-items:center; margin-bottom: var(--space-12); }
.product-intro .banner{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/11; }
.product-intro .banner img{ width:100%; height:100%; object-fit:cover; }
.product-intro h3{ font-size: clamp(22px,3vw,30px); }
.product-intro p{ margin-top: var(--space-4); color: var(--color-text-secondary); font-size:15.5px; line-height:1.75; }
.product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.product-card{
background: var(--color-bg-raised); border-radius: var(--radius-lg); overflow:hidden;
box-shadow: var(--shadow-sm); border: 1px solid var(--color-border);
transition: transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms ease;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product-card .thumb{ aspect-ratio: 4/3; overflow:hidden; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform 500ms ease; }
.product-card:hover .thumb img{ transform: scale(1.06); }
.product-card .body{ padding: var(--space-5); }
.product-card h4{ font-family: var(--font-body); font-size:15.5px; font-weight:700; }
.product-card p{ font-size:13px; color: var(--color-text-secondary); margin-top:6px; line-height:1.6; }
/* ============================================================
Why choose us
============================================================ */
.why{ padding: var(--space-24) 0; }
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
.why-card{
padding: var(--space-8) var(--space-6);
border-radius: var(--radius-lg);
background: var(--color-bg-raised);
border: 1px solid var(--color-border);
transition: transform 240ms ease, border-color 240ms ease;
}
.why-card:hover{ transform: translateY(-4px); border-color: var(--color-accent); }
.why-icon{
width:52px; height:52px; border-radius: var(--radius-md);
background: var(--color-bg-dark); color: var(--color-accent);
display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-5);
}
.why-card h4{ font-family: var(--font-body); font-size:16.5px; font-weight:700; }
.why-card p{ margin-top: var(--space-2); font-size:14px; color: var(--color-text-secondary); line-height:1.65; }
/* ============================================================
Testimonials
============================================================ */
.testimonials{ padding: var(--space-24) 0; background: var(--color-bg-sunken); }
/* ---------- Testimonial carousel (15 reviews, 3 visible at a time) ---------- */
.testimonial-carousel{ margin-top: var(--space-12); }
.testimonial-viewport{ overflow: hidden; }
.testimonial-track{
display:flex; gap: var(--space-6);
transition: transform 480ms cubic-bezier(.4,0,.2,1);
}
.testimonial-track .testimonial-card{ flex: 0 0 calc((100% - 2 * var(--space-6)) / 3); }
.testimonial-card{
display:flex; flex-direction:column; gap: var(--space-4);
background: var(--color-bg-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-sm);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.testimonial-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-card .stars{ color: var(--color-accent); font-size:13px; letter-spacing:3px; }
.testimonial-card .quote-mark{ color: var(--color-accent); opacity:0.55; margin-top:-8px; }
.testimonial-card .quote{
flex:1;
font-family: var(--font-display); font-style: italic; font-weight:500;
font-size: 16.5px; line-height:1.65; color: var(--color-text-primary);
}
.testimonial-author{
display:flex; align-items:center; gap: var(--space-3);
padding-top: var(--space-5); border-top: 1px solid var(--color-border);
}
.testimonial-avatar{
width:44px; height:44px; border-radius:50%; flex-shrink:0;
background: var(--color-accent-light); color: var(--color-accent-ink);
display:flex; align-items:center; justify-content:center;
font-family: var(--font-display); font-weight:700; font-size:15px;
}
.testimonial-author h5{ font-family: var(--font-body); font-size:14.5px; font-weight:700; }
.testimonial-author .tag{ display:block; margin-top:2px; font-size:12px; font-weight:600; color: var(--color-text-secondary); letter-spacing:0.01em; }
.testimonial-nav{ display:flex; align-items:center; justify-content:center; gap: var(--space-6); margin-top: var(--space-10); }
.testi-arrow{
width:44px; height:44px; border-radius:50%; flex-shrink:0;
border:1px solid var(--color-border-strong); background: var(--color-bg-raised);
display:flex; align-items:center; justify-content:center; color: var(--color-text-primary);
transition: all 200ms ease;
}
.testi-arrow:hover{ border-color: var(--color-accent); color: var(--color-accent-dark); background: var(--color-accent-light); }
.testi-arrow:disabled{ opacity:0.35; pointer-events:none; }
.testimonial-dots{ display:flex; align-items:center; gap:8px; }
.testimonial-dots button{
width:8px; height:8px; border-radius:50%; padding:0; border:none;
background: var(--color-border-strong); transition: all 200ms ease; cursor:pointer;
}
.testimonial-dots button.is-active{ background: var(--color-accent); width:22px; border-radius: var(--radius-full); }
.testimonials-note{ margin-top: var(--space-8); text-align:center; font-size:13px; color: var(--color-text-secondary); }
.testimonials-note a{ color: var(--color-accent-dark); font-weight:700; }
/* ============================================================
Gallery
============================================================ */
.gallery{ padding: var(--space-24) 0; background: var(--color-bg-dark); }
.gallery .section-head h2, .gallery .eyebrow{ color: var(--color-text-inverse); }
.gallery .section-head p{ color: var(--color-text-inverse-muted); }
.gallery-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: var(--space-4);
}
.gallery-item{ position:relative; border-radius: var(--radius-md); overflow:hidden; cursor:pointer; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform 500ms ease; }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.65) 100%);
opacity:0; transition: opacity 250ms ease;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-item .zoom{
position:absolute; bottom: var(--space-3); right: var(--space-3);
width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,0.92);
display:flex; align-items:center; justify-content:center; color: var(--color-bg-dark);
opacity:0; transform: scale(0.7); transition: all 250ms ease;
}
.gallery-item:hover .zoom{ opacity:1; transform: scale(1); }
.gallery-item.span-2{ grid-column: span 2; grid-row: span 2; }
.lightbox{
position:fixed; inset:0; z-index: 200; background: rgba(10,8,6,0.94);
display:flex; align-items:center; justify-content:center; padding: var(--space-8);
opacity:0; pointer-events:none; transition: opacity 220ms ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width: min(90vw, 1100px); max-height: 84vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); transform: scale(0.96); transition: transform 220ms ease; }
.lightbox.is-open img{ transform: scale(1); }
.lightbox-close, .lightbox-nav{
position:absolute; z-index: 3; width:48px; height:48px; border-radius:50%; background: rgba(20,16,13,0.55);
border: 1px solid rgba(255,255,255,0.25); color:#fff; display:flex; align-items:center; justify-content:center;
transition: background 200ms ease; backdrop-filter: blur(4px);
}
.lightbox-close:hover, .lightbox-nav:hover{ background: rgba(255,255,255,0.25); }
.lightbox-close{ top: var(--space-6); right: var(--space-6); }
.lightbox-nav.prev{ left: var(--space-3); top:50%; transform: translateY(-50%); }
.lightbox-nav.next{ right: var(--space-3); top:50%; transform: translateY(-50%); }
.lightbox-count{ position:absolute; z-index:3; bottom: var(--space-6); left:50%; transform: translateX(-50%); color: var(--color-text-inverse-muted); font-size:13px; font-weight:600; letter-spacing:0.05em; }
@media (max-width: 640px){
.lightbox{ padding: var(--space-4); }
.lightbox-close, .lightbox-nav{ width:40px; height:40px; }
.lightbox-close{ top: var(--space-3); right: var(--space-3); }
}
/* ============================================================
CTA band
============================================================ */
.cta-band{
background: linear-gradient(120deg, var(--color-accent-dark), var(--color-accent));
padding: var(--space-16) 0;
}
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-8); flex-wrap:wrap; }
.cta-band h2{ color:#fff; font-size: clamp(24px,3.4vw,34px); max-width:520px; }
.cta-band p{ color: rgba(255,255,255,0.85); margin-top: var(--space-2); font-size:15px; }
.cta-band-actions{ display:flex; gap: var(--space-4); flex-wrap:wrap; }
.cta-band .btn-primary{ background:#fff; color: var(--color-accent-ink); box-shadow: none; }
.cta-band .btn-primary:hover{ background: var(--color-bg-dark); color:#fff; }
.cta-band .btn-secondary{ border-color: rgba(255,255,255,0.5); color:#fff; }
.cta-band .btn-secondary:hover{ background: rgba(255,255,255,0.15); }
/* ============================================================
Contact
============================================================ */
.contact{ padding: var(--space-24) 0; }
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-16); }
.contact-info-list{ display:flex; flex-direction:column; gap: var(--space-5); margin-top: var(--space-8); }
.contact-info-item{ display:flex; gap: var(--space-4); padding: var(--space-5); background: var(--color-bg-raised); border:1px solid var(--color-border); border-radius: var(--radius-lg); }
.contact-info-icon{ width:44px; height:44px; border-radius: var(--radius-md); background: var(--color-accent-light); color: var(--color-accent-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item h4{ font-family: var(--font-body); font-size:14.5px; font-weight:700; }
.contact-info-item p, .contact-info-item a{ font-size:14px; color: var(--color-text-secondary); margin-top:3px; display:block; }
.contact-info-item a:hover{ color: var(--color-accent-dark); }
.contact-card{
background: var(--color-bg-dark); border-radius: var(--radius-xl); padding: var(--space-10);
box-shadow: var(--shadow-lg);
}
.contact-card h3{ color: var(--color-text-inverse); font-size:24px; }
.contact-card > p{ color: var(--color-text-inverse-muted); margin-top: var(--space-2); font-size:14.5px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.form-field{ display:flex; flex-direction:column; gap: var(--space-2); }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size:12.5px; font-weight:600; color: var(--color-text-inverse-muted); letter-spacing:0.02em; }
.form-field input, .form-field textarea, .form-field select{
background: rgba(247,241,232,0.06); border: 1px solid rgba(247,241,232,0.18);
border-radius: var(--radius-md); padding: 13px 16px; color: var(--color-text-inverse);
font-family: inherit; font-size:14.5px; transition: border-color 200ms ease, background 200ms ease;
}
.form-field input::placeholder, .form-field textarea::placeholder{ color: rgba(201,191,178,0.55); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
outline:none; border-color: var(--color-accent); background: rgba(247,241,232,0.1);
}
.contact-card .btn-primary{ margin-top: var(--space-6); }
.form-note{ font-size:12px; color: var(--color-text-inverse-muted); margin-top: var(--space-4); text-align:center; }
/* Honeypot — off-screen rather than display:none, since some bots skip
display:none fields deliberately but still auto-fill anything else. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.form-status{ margin-top: var(--space-4); text-align:center; font-size:13.5px; font-weight:600; min-height:1px; }
.form-status.is-success{ color: #6FCF97; }
.form-status.is-error{ color: #F09090; }
.btn[disabled]{ opacity:0.65; pointer-events:none; }
/* ============================================================
Footer
============================================================ */
.site-footer{ background: var(--color-bg-dark); padding: var(--space-20) 0 var(--space-8); color: var(--color-text-inverse-muted); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-10); padding-bottom: var(--space-12); border-bottom: 1px solid var(--color-border-dark); }
.footer-brand .brand-text .brand-name{ color: var(--color-text-inverse); }
.footer-brand p{ margin-top: var(--space-4); font-size:14px; line-height:1.7; max-width: 320px; }
.footer-social{ display:flex; gap: var(--space-3); margin-top: var(--space-6); }
.footer-social a{
width:38px; height:38px; border-radius:50%; border: 1px solid var(--color-border-dark);
display:flex; align-items:center; justify-content:center; transition: all 200ms ease;
}
.footer-social a:hover{ background: var(--color-accent); border-color: var(--color-accent); color:#fff; }
.footer-col h5{ color: var(--color-text-inverse); font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom: var(--space-5); }
.footer-col ul{ display:flex; flex-direction:column; gap: var(--space-3); }
.footer-col a{ font-size:14px; transition: color 200ms ease; }
.footer-col a:hover{ color: var(--color-accent); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: var(--space-6); font-size:13px; flex-wrap:wrap; gap: var(--space-3); }
.footer-bottom a:hover{ color: var(--color-accent); }
/* ============================================================
Scroll animations
All variants share the same IntersectionObserver in script.js (it just
toggles .is-visible) — the different entrance styles come entirely from
CSS, so adding a new one anywhere is a one-line class change, no JS.
============================================================ */
/* .reveal — fade + rise. Default for text: headings, paragraphs, section heads. */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0,0,0.2,1), transform 700ms cubic-bezier(0,0,0.2,1); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
/* .reveal-zoom — fade + scale up from 92%. For card/grid containers (product
cards, gallery items, blog cards…) — scales the CARD itself, never the
![]()
inside it, so it never fights with that image's own :hover zoom. */
.reveal-zoom{ opacity:0; transform: scale(0.92); transition: opacity 650ms cubic-bezier(0.16,1,0.3,1), transform 650ms cubic-bezier(0.16,1,0.3,1); }
.reveal-zoom.is-visible{ opacity:1; transform: scale(1); }
/* .reveal-left / .reveal-right — fade + slide in from a side. For two-column
layouts (About teaser, SEO content blocks) to give left/right columns a
distinct, complementary motion instead of both rising identically. */
.reveal-left{ opacity:0; transform: translateX(-32px); transition: opacity 700ms cubic-bezier(0,0,0.2,1), transform 700ms cubic-bezier(0,0,0.2,1); }
.reveal-left.is-visible{ opacity:1; transform: translateX(0); }
.reveal-right{ opacity:0; transform: translateX(32px); transition: opacity 700ms cubic-bezier(0,0,0.2,1), transform 700ms cubic-bezier(0,0,0.2,1); }
.reveal-right.is-visible{ opacity:1; transform: translateX(0); }
/* Every .reveal-left/.reveal-right pairing sits in a 2-column grid that
collapses to 1 column at 1024px (about-grid, hero-grid, seo-content-grid,
contact-grid). Once stacked, a full-width block sliding in from the side
pushes past the viewport edge before it animates in — a real horizontal
scroll bug, not just a visual nicety. Below that breakpoint, fall back to
the same vertical rise as plain .reveal instead of a horizontal slide. */
@media (max-width: 1024px){
.reveal-left, .reveal-right{ transform: translateY(24px); }
.reveal-left.is-visible, .reveal-right.is-visible{ transform: translateY(0); }
}
/* .img-zoom — Ken Burns style: a large standalone photo (About photo, hero
image, article cover, page-hero banner) starts slightly zoomed in and
eases back to its normal size as it scrolls into view. Needs overflow
hidden on the frame so the zoomed edges never poke past the rounded
corners. Targets the ![]()
directly since these aren't hover-zoom cards. */
.img-zoom{ overflow: hidden; }
.img-zoom img, .img-zoom.page-hero-bg{ transform: scale(1.15); transition: transform 1400ms cubic-bezier(0.16,1,0.3,1); }
.img-zoom.is-visible img, .img-zoom.page-hero-bg.is-visible{ transform: scale(1); }
/* Staggered reveal for grids — items in the same row cross the viewport
threshold within the same JS tick, so a small per-item delay turns that
into a visible ripple instead of everything popping in at once. */
.cat-grid > *:nth-child(1), .product-grid > *:nth-child(1), .why-grid > *:nth-child(1),
.blog-grid > *:nth-child(1), .gallery-grid > *:nth-child(1), .seo-highlights > *:nth-child(1),
.testimonial-track > *:nth-child(1){ transition-delay: 0ms; }
.cat-grid > *:nth-child(2), .product-grid > *:nth-child(2), .why-grid > *:nth-child(2),
.blog-grid > *:nth-child(2), .gallery-grid > *:nth-child(2), .seo-highlights > *:nth-child(2),
.testimonial-track > *:nth-child(2){ transition-delay: 90ms; }
.cat-grid > *:nth-child(3), .product-grid > *:nth-child(3), .why-grid > *:nth-child(3),
.blog-grid > *:nth-child(3), .gallery-grid > *:nth-child(3), .seo-highlights > *:nth-child(3),
.testimonial-track > *:nth-child(3){ transition-delay: 180ms; }
.cat-grid > *:nth-child(4), .product-grid > *:nth-child(4), .why-grid > *:nth-child(4),
.blog-grid > *:nth-child(4), .gallery-grid > *:nth-child(4), .seo-highlights > *:nth-child(4){ transition-delay: 270ms; }
.product-grid > *:nth-child(n+5), .gallery-grid > *:nth-child(n+5){ transition-delay: 360ms; }
/* Back to top */
.back-to-top{
position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 60;
width:48px; height:48px; border-radius:50%; background: var(--color-bg-dark); color: var(--color-accent);
display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
opacity:0; pointer-events:none; transform: translateY(12px); transition: all 250ms ease;
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
/* Floating WhatsApp */
.float-whatsapp{
position: fixed; left: var(--space-6); bottom: var(--space-6); z-index: 60;
width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 24px -6px rgba(37,211,102,0.55);
animation: pulse 2.4s ease infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow: 0 10px 24px -6px rgba(37,211,102,0.55);} 50%{ box-shadow: 0 10px 30px -4px rgba(37,211,102,0.85);} }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1024px){
.about-grid{ grid-template-columns: 1fr; gap: var(--space-10); }
.about-media{ max-width:480px; margin: 0 auto; }
.product-grid{ grid-template-columns: repeat(2,1fr); }
.product-intro{ grid-template-columns: 1fr; }
.why-grid{ grid-template-columns: repeat(2,1fr); }
.gallery-grid{ grid-template-columns: repeat(3,1fr); grid-auto-rows:170px; }
.contact-grid{ grid-template-columns: 1fr; gap: var(--space-12); }
.hero-stats{ grid-template-columns: repeat(2,1fr); row-gap: var(--space-8); }
.footer-grid{ grid-template-columns: 1fr 1fr; }
.testimonial-track .testimonial-card{ flex: 0 0 calc((100% - var(--space-6)) / 2); }
.hero-grid{ grid-template-columns: 1fr; gap: var(--space-12); }
.hero-content{ max-width: none; }
.hero-media{ max-width: 480px; margin: 0 auto; }
}
@media (max-width: 720px){
.nav-desktop, .header-call{ display:none; }
.nav-toggle{ display:flex; }
.nav-mobile{ display:block; }
.header-actions{ gap: var(--space-2); }
.brand{ gap: var(--space-2); }
.brand-mark{ width:38px; height:38px; }
.brand-text .brand-name{ font-size:14.5px; white-space:nowrap; }
.brand-text .brand-sub{ font-size:9px; }
.brand-logo{ height: 44px; }
.site-header.is-scrolled .brand-logo{ height: 40px; }
.hero{ padding: 120px 0 var(--space-16); }
.hero-ctas .btn{ width:100%; }
.hero-ctas{ flex-direction:column; }
/* Same edge-bleed risk as the About section's floating badge — pull the
badge back inside the image frame instead of overhanging past it. */
.hero-media-badge{ left: var(--space-4); bottom: -16px; padding: var(--space-4) var(--space-5); }
.hero-media-badge .n{ font-size: 24px; }
/* The layered "floating photo" offset (-10% right / -24px badge) is a
deliberate overlap on desktop, but at phone widths it pushes past the
viewport edge and causes real horizontal scroll — pull it back in. */
.about-media{ overflow: visible; padding-right: var(--space-4); }
.about-media-float{ right: 0; bottom: -6%; width: 44%; }
.about-media-badge{ left: 0; top: -16px; padding: var(--space-4) var(--space-5); }
.product-grid{ grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
.why-grid{ grid-template-columns: 1fr; }
.gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:150px; }
.gallery-item.span-2{ grid-column: span 2; grid-row: span 1; }
.form-row{ grid-template-columns: 1fr; }
.footer-grid{ grid-template-columns: 1fr; gap: var(--space-8); }
.cta-band .container{ flex-direction:column; align-items:flex-start; }
.section-head{ margin-bottom: var(--space-8); }
.about, .products, .why, .gallery, .contact, .testimonials{ padding: var(--space-16) 0; }
.tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.tab-btn{ flex-shrink:0; }
.testimonial-track{ gap: var(--space-4); }
.testimonial-track .testimonial-card{ flex: 0 0 100%; }
.testimonial-nav{ gap: var(--space-4); margin-top: var(--space-8); }
.testi-arrow{ width:40px; height:40px; }
.testimonial-dots{ display:none; } /* 15 dots at 1-per-view is too many; arrows carry mobile nav */
/* Prevent iOS Safari from auto-zooming the page when a form field is focused */
.form-field input, .form-field textarea, .form-field select{ font-size: 16px; }
/* Comfortable one-thumb tap targets on touch screens */
.btn{ min-height: 46px; }
.footer-social a{ width:42px; height:42px; }
}
@media (max-width: 480px){
.product-grid{ grid-template-columns: 1fr 1fr; }
.gallery-grid{ grid-template-columns: repeat(2,1fr); }
.header-actions .btn-primary{ display:none; }
.brand-logo{ height: 38px; }
.site-header.is-scrolled .brand-logo{ height: 34px; }
}
/* ============================================================
Multi-page additions — nav dropdown, page hero, breadcrumb,
category grid, product cross-links, active states
============================================================ */
/* Nav dropdown (desktop)
.nav-dropdown is the HOVERABLE hit-box: it starts at top:100% with ZERO gap
against the link (so there is no dead zone the pointer can slip through)
and is exactly as wide as the visible card, so any path — straight down or
diagonal to a side item — stays continuously over a descendant of
.nav-item. The 14px visual gap is recreated as padding-top on this same
box; .nav-dropdown-inner carries the actual card look and its own
translateY so the *visible* card still appears to drop in from +6px. */
.nav-desktop{ position: relative; }
.nav-item{ position: relative; }
.nav-item > a{ display:inline-flex; align-items:center; gap:5px; }
.nav-caret{ width:9px; height:9px; flex-shrink:0; transition: transform 180ms ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret,
.nav-item.is-open .nav-caret{ transform: rotate(180deg); }
.nav-dropdown{
position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
padding-top: 14px;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 180ms ease, visibility 0ms linear 180ms;
z-index: 20;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.is-open .nav-dropdown{
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity 180ms ease, visibility 0ms;
}
.nav-dropdown-inner{
min-width: 220px;
background: var(--color-bg-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-2);
transform: translateY(6px);
transition: transform 180ms ease;
}
.nav-item:hover .nav-dropdown-inner, .nav-item:focus-within .nav-dropdown-inner, .nav-item.is-open .nav-dropdown-inner{
transform: translateY(0);
}
.nav-dropdown a{
display:block; padding: 10px 14px; border-radius: var(--radius-md);
font-size: 14.5px; font-weight: 600; color: var(--color-text-primary) !important;
white-space: nowrap;
}
.nav-dropdown a::after{ display:none; }
.nav-dropdown a:hover{ background: var(--color-bg-sunken); color: var(--color-accent-dark) !important; }
.site-header:not(.is-scrolled) .nav-item .nav-caret{ color: var(--color-text-inverse); }
/* Active nav-link state */
.nav-desktop > a.is-active::after,
.nav-item > a.is-active::after{ transform: scaleX(1); }
.nav-mobile a.is-active{ color: var(--color-accent) !important; }
/* Mobile submenu */
.nav-mobile .submenu{ display:flex; flex-direction:column; gap: 0; padding-left: var(--space-4); margin-top: -8px; }
.nav-mobile .submenu li a{ font-size: 18px; padding: var(--space-3) 0; border-bottom: 1px dashed var(--color-border-dark); color: var(--color-text-inverse-muted); }
.nav-mobile .submenu-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; padding: var(--space-4) 0; font-family: var(--font-display); font-size:26px; font-weight:600; color: var(--color-text-inverse); border-bottom: 1px solid var(--color-border-dark); }
.nav-mobile .submenu-toggle svg{ width:16px; height:16px; transition: transform 200ms ease; flex-shrink:0; }
.nav-mobile li.has-submenu.is-open .submenu-toggle svg{ transform: rotate(180deg); }
.nav-mobile li.has-submenu .submenu{ display:none; }
.nav-mobile li.has-submenu.is-open .submenu{ display:flex; }
/* ---------- Page hero (interior pages) ---------- */
.page-hero{
position: relative;
padding: 168px 0 var(--space-16);
background: var(--color-bg-dark);
overflow: hidden;
}
.page-hero-bg{
position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.32;
}
.page-hero-bg::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(15,12,10,0.75) 0%, rgba(15,12,10,0.92) 100%);
}
.breadcrumb{
position:relative; z-index:2;
display:flex; align-items:center; gap:8px;
font-size: 13px; font-weight:600; color: var(--color-text-inverse-muted);
margin-bottom: var(--space-5);
}
.breadcrumb a{ color: var(--color-text-inverse-muted); }
.breadcrumb a:hover{ color: var(--color-accent); }
.breadcrumb span.sep{ opacity:0.5; }
.breadcrumb span.current{ color: var(--color-accent); }
.page-hero-content{ position:relative; z-index:2; max-width: 700px; }
.page-hero h1{
font-size: clamp(32px, 4.6vw, 52px);
line-height: 1.1;
color: var(--color-text-inverse);
}
.page-hero p{
margin-top: var(--space-4);
font-size: 17px;
line-height: 1.7;
color: var(--color-text-inverse-muted);
max-width: 560px;
}
/* ---------- Category grid (Home teaser) ---------- */
.cat-grid{
display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6);
margin-top: var(--space-12);
}
.cat-card{
position:relative; display:block; border-radius: var(--radius-lg); overflow:hidden;
aspect-ratio: 3/4; box-shadow: var(--shadow-md);
}
.cat-card img{ width:100%; height:100%; object-fit:cover; transition: transform 500ms ease; }
.cat-card:hover img{ transform: scale(1.07); }
.cat-card::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(15,12,10,0) 35%, rgba(15,12,10,0.88) 100%);
}
.cat-card-body{
position:absolute; left:0; right:0; bottom:0; z-index:2; padding: var(--space-5);
}
.cat-card-body h4{ color:#fff; font-size:19px; }
.cat-card-body span{
display:inline-flex; align-items:center; gap:6px; margin-top:6px;
font-size:12.5px; font-weight:700; letter-spacing:0.03em; color: var(--color-accent);
}
.cat-card-body svg{ width:13px; height:13px; transition: transform 200ms ease; }
.cat-card:hover .cat-card-body svg{ transform: translateX(3px); }
/* ---------- Product cross-links (chip row on product pages) ---------- */
.product-links{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-bottom: var(--space-12); }
.product-links a{
padding: 10px 20px; border-radius: var(--radius-full);
border: 1.5px solid var(--color-border-strong);
font-size: 14px; font-weight: 600; color: var(--color-text-secondary);
transition: all 180ms ease;
}
.product-links a:hover{ border-color: var(--color-accent); color: var(--color-accent-dark); }
.product-links a.is-active{ background: var(--color-bg-dark); border-color: var(--color-bg-dark); color: var(--color-text-inverse); }
/* Home "About" teaser CTA row spacing already covered by .hero-ctas reuse */
@media (max-width: 1024px){
.cat-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px){
.cat-grid{ grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
.page-hero{ padding: 128px 0 var(--space-12); }
}
@media (max-width: 480px){
.cat-grid{ grid-template-columns: 1fr; }
}
/* ============================================================
Blog — index grid, article layout, legal pages
============================================================ */
.blog-filter{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-bottom: var(--space-12); }
.blog-filter a{
padding: 10px 20px; border-radius: var(--radius-full);
border: 1.5px solid var(--color-border-strong);
font-size: 14px; font-weight: 600; color: var(--color-text-secondary);
transition: all 180ms ease;
}
.blog-filter a:hover{ border-color: var(--color-accent); color: var(--color-accent-dark); }
.blog-filter a.is-active{ background: var(--color-bg-dark); border-color: var(--color-bg-dark); color: var(--color-text-inverse); }
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-8); }
.blog-card{
display:flex; flex-direction:column;
background: var(--color-bg-raised); border-radius: var(--radius-lg); overflow:hidden;
box-shadow: var(--shadow-sm); border: 1px solid var(--color-border);
transition: transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms ease;
}
.blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-card .thumb{ aspect-ratio: 16/10; overflow:hidden; position:relative; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform 500ms ease; }
.blog-card:hover .thumb img{ transform: scale(1.06); }
.blog-card .cat-tag{
position:absolute; top: var(--space-3); left: var(--space-3); z-index:2;
background: var(--color-accent); color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.04em; text-transform:uppercase; padding: 6px 12px; border-radius: var(--radius-full);
}
.blog-card .body{ padding: var(--space-6); display:flex; flex-direction:column; gap: var(--space-3); flex:1; }
.blog-card .blog-meta{ font-size:12px; font-weight:600; color: var(--color-text-secondary); letter-spacing:0.02em; }
.blog-card h3{ font-size:18.5px; line-height:1.3; }
.blog-card p{ font-size:14px; color: var(--color-text-secondary); line-height:1.6; flex:1; }
.blog-card .read-more{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color: var(--color-accent-dark); margin-top: var(--space-2); }
.blog-card .read-more svg{ width:13px; height:13px; transition: transform 200ms ease; }
.blog-card:hover .read-more svg{ transform: translateX(3px); }
/* ---------- Article (single post) ---------- */
.article-section{ padding: var(--space-20) 0 var(--space-24); }
.article-shell{ display:grid; grid-template-columns: 1fr 320px; gap: var(--space-16); align-items:start; }
/* Grid items default to min-width:auto (content-based), so a wide table
nested inside can force this whole column wider than the viewport even
though the table itself is wrapped in an overflow-x:auto div — override
so the column can shrink and let that inner div do the scrolling instead. */
.article-shell > article{ min-width: 0; }
.article-meta-row{ display:flex; align-items:center; gap: var(--space-3); flex-wrap:wrap; font-size:13px; font-weight:600; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.article-meta-row .cat-tag{ background: var(--color-accent-light); color: var(--color-accent-ink); padding: 5px 12px; border-radius: var(--radius-full); font-weight:700; font-size:11.5px; letter-spacing:0.03em; text-transform:uppercase; }
.article-cover{ border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/9; margin: var(--space-8) 0; }
.article-cover img{ width:100%; height:100%; object-fit:cover; }
.prose{ font-size:16.5px; line-height:1.8; color: var(--color-text-secondary); }
.prose h2{ font-size: clamp(22px,2.6vw,28px); color: var(--color-text-primary); margin-top: var(--space-10); margin-bottom: var(--space-4); line-height:1.25; }
.prose h3{ font-size: 19.5px; font-family: var(--font-body); font-weight:700; color: var(--color-text-primary); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose p{ margin-top: var(--space-5); }
.prose p:first-child{ margin-top:0; }
.prose ul, .prose ol{ margin-top: var(--space-5); padding-left: 1.4em; list-style: disc; display:flex; flex-direction:column; gap: var(--space-2); }
.prose ol{ list-style: decimal; }
.prose li{ padding-left: 4px; }
.prose li::marker{ color: var(--color-accent); }
.prose strong{ color: var(--color-text-primary); font-weight:700; }
.prose a{ color: var(--color-accent-dark); font-weight:700; text-decoration: underline; text-underline-offset:2px; }
.prose blockquote{
margin: var(--space-8) 0; padding: var(--space-6) var(--space-8);
border-left: 3px solid var(--color-accent); background: var(--color-bg-sunken);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-family: var(--font-display); font-style:italic; font-size:18px; color: var(--color-text-primary);
}
.prose table{ width:100%; border-collapse: collapse; margin-top: var(--space-6); font-size:14.5px; }
.prose th, .prose td{ text-align:left; padding: 12px 14px; border: 1px solid var(--color-border); }
.prose th{ background: var(--color-bg-sunken); font-weight:700; }
.prose figure{ margin: var(--space-8) 0; }
.prose figcaption{ margin-top: var(--space-2); font-size:13px; color: var(--color-text-secondary); text-align:center; }
.article-tags{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.article-tags a{ padding: 7px 16px; border-radius: var(--radius-full); background: var(--color-bg-sunken); font-size:12.5px; font-weight:600; color: var(--color-text-secondary); transition: all 180ms ease; }
.article-tags a:hover{ background: var(--color-accent-light); color: var(--color-accent-ink); }
.article-share{ display:flex; align-items:center; gap: var(--space-3); margin-top: var(--space-8); }
.article-share span{ font-size:13px; font-weight:700; color: var(--color-text-secondary); }
.article-share a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--color-border-strong); display:flex; align-items:center; justify-content:center; color: var(--color-text-secondary); transition: all 200ms ease; }
.article-share a:hover{ background: var(--color-accent); border-color: var(--color-accent); color:#fff; }
.article-sidebar{ display:flex; flex-direction:column; gap: var(--space-6); position: sticky; top: 100px; }
.sidebar-card{ background: var(--color-bg-raised); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.sidebar-card h5{ font-family: var(--font-body); font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.sidebar-links{ display:flex; flex-direction:column; gap: var(--space-3); }
.sidebar-links a{ font-size:14.5px; font-weight:600; color: var(--color-text-primary); padding-bottom: var(--space-3); border-bottom: 1px dashed var(--color-border); transition: color 180ms ease; }
.sidebar-links a:last-child{ border-bottom:none; padding-bottom:0; }
.sidebar-links a:hover{ color: var(--color-accent-dark); }
.sidebar-cta{ background: var(--color-bg-dark); color: var(--color-text-inverse); text-align:center; }
.sidebar-cta h5{ color: var(--color-text-inverse-muted); }
.sidebar-cta p{ font-size:14px; color: var(--color-text-inverse-muted); margin-bottom: var(--space-5); }
.sidebar-cta .btn{ width:100%; }
.related-posts{ padding: var(--space-20) 0; background: var(--color-bg-sunken); }
/* ---------- Legal pages (Privacy / Terms) ---------- */
.legal-section{ padding: var(--space-20) 0 var(--space-24); }
.legal-shell{ max-width: 820px; margin: 0 auto; }
.legal-updated{ font-size:13px; font-weight:600; color: var(--color-text-secondary); margin-bottom: var(--space-8); }
.legal-toc{ background: var(--color-bg-sunken); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-10); }
.legal-toc h5{ font-family: var(--font-body); font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.legal-toc ol{ padding-left: 1.2em; display:flex; flex-direction:column; gap: var(--space-2); }
.legal-toc a{ font-size:14.5px; font-weight:600; color: var(--color-text-primary); }
.legal-toc a:hover{ color: var(--color-accent-dark); }
@media (max-width: 1024px){
.blog-grid{ grid-template-columns: repeat(2,1fr); }
.article-shell{ grid-template-columns: 1fr; }
.article-sidebar{ position:static; }
}
@media (max-width: 720px){
.blog-grid{ grid-template-columns: 1fr; gap: var(--space-6); }
.article-section, .legal-section{ padding: var(--space-14) 0 var(--space-16); }
.prose{ font-size:15.5px; }
.legal-toc{ padding: var(--space-5) var(--space-6); }
}
/* ============================================================
SEO content block + on-page FAQ (product & home pages)
============================================================ */
.seo-content{ padding: var(--space-20) 0; }
.seo-content-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-16); align-items:start; }
.seo-content-copy h2{ font-size: clamp(26px,3vw,36px); margin-top: var(--space-3); margin-bottom: var(--space-6); line-height:1.2; }
.seo-content-copy p{ font-size:15.5px; line-height:1.8; color: var(--color-text-secondary); margin-top: var(--space-5); }
.seo-content-copy p:first-of-type{ margin-top:0; }
.seo-content-copy p a{ color: var(--color-accent-dark); font-weight:700; text-decoration: underline; text-underline-offset:2px; }
.seo-content-copy strong{ color: var(--color-text-primary); }
.seo-content-links{ display:flex; gap: var(--space-4); flex-wrap:wrap; margin-top: var(--space-8); }
.seo-highlights{ display:flex; flex-direction:column; gap: var(--space-4); }
.highlight-card{
background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
padding: var(--space-6); display:flex; align-items:center; gap: var(--space-5);
box-shadow: var(--shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease;
}
.highlight-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.highlight-card .hc-num{ font-family: var(--font-display); font-size: 34px; font-weight:800; color: var(--color-accent); line-height:1; flex-shrink:0; min-width: 76px; }
.highlight-card .hc-label{ font-size:13px; font-weight:700; letter-spacing:0.02em; color: var(--color-text-secondary); line-height:1.4; }
.highlight-card.is-cta{ background: var(--color-bg-dark); flex-direction:column; align-items:stretch; text-align:left; }
.highlight-card.is-cta p{ color: var(--color-text-inverse-muted); font-size:14px; line-height:1.6; margin:0 0 var(--space-5); }
.highlight-card.is-cta .btn{ width:100%; }
.faq-section{ padding: var(--space-16) 0; background: var(--color-bg-sunken); }
.faq-grid{ max-width: 820px; margin: var(--space-10) auto 0; display:flex; flex-direction:column; gap: var(--space-3); }
.faq-item{
background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-8);
}
.faq-item h3{ font-family: var(--font-body); font-size:16px; font-weight:700; color: var(--color-text-primary); }
.faq-item p{ margin-top: var(--space-2); font-size:14.5px; line-height:1.7; color: var(--color-text-secondary); }
.faq-item p a{ color: var(--color-accent-dark); font-weight:700; }
@media (max-width: 1024px){
.seo-content-grid{ grid-template-columns: 1fr; gap: var(--space-10); }
.seo-highlights{ flex-direction:row; flex-wrap:wrap; }
.seo-highlights .highlight-card{ flex: 1 1 220px; }
}
@media (max-width: 720px){
.seo-content, .faq-section{ padding: var(--space-12) 0; }
.faq-item{ padding: var(--space-5) var(--space-6); }
.seo-highlights{ flex-direction:column; }
}
/* Location qualifier inside product-page H1s — same element (so it's part of
the H1 for search engines) but styled as a visually distinct subline. */
.page-hero h1 .h1-loc{
display:block; font-family: var(--font-body); font-weight:600;
font-size: 0.4em; letter-spacing:0.02em; color: var(--color-text-inverse-muted);
margin-top: var(--space-3); text-transform: none;
}
/* ============================================================
Contact page — map embed + areas served
============================================================ */
.map-section{ background: var(--color-bg-sunken); padding-bottom: var(--space-12); }
.map-embed{ width:100%; height: 380px; }
.map-embed iframe{ width:100%; height:100%; display:block; filter: grayscale(0.15) contrast(1.02); }
.areas-served{ padding-top: var(--space-8); text-align:center; }
.areas-served h5{ font-family: var(--font-body); font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: var(--color-accent-dark); margin-bottom: var(--space-3); }
.areas-served p{ max-width: 720px; margin: 0 auto; font-size:15px; line-height:1.7; color: var(--color-text-secondary); }
.areas-served strong{ color: var(--color-text-primary); }
@media (max-width: 720px){
.map-embed{ height: 280px; }
}
/* Footer brand — same wordmark logo as the header, run larger since (like
the header) the artwork already carries the full name; no separate text. */
.footer-brand .brand{ align-items:flex-start; }
.footer-logo{ height: 52px; width:auto; display:block; }
/* .btn-outline is styled for light backgrounds (dark border + dark text);
the gallery teaser sits on --color-bg-dark, so it needs the light variant
used elsewhere on dark sections (hero, cta-band) instead. */
.gallery .btn-outline{
border-color: rgba(247,241,232,0.35);
color: var(--color-text-inverse);
}
.gallery .btn-outline:hover{
background: rgba(247,241,232,0.1);
border-color: var(--color-accent);
color: var(--color-text-inverse);
}
/* ============================================================
Gallery page — filter chips, category tags, hover captions
============================================================ */
.gallery-filter{ display:flex; gap: var(--space-2); flex-wrap:wrap; justify-content:center; margin-bottom: var(--space-10); }
.gallery-filter a{
padding: 10px 20px; border-radius: var(--radius-full);
border: 1.5px solid rgba(247,241,232,0.2);
font-size: 14px; font-weight: 600; color: var(--color-text-inverse-muted);
transition: all 180ms ease;
}
.gallery-filter a:hover{ border-color: var(--color-accent); color: var(--color-text-inverse); }
.gallery-filter a.is-active{ background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.gallery-item .gallery-cat-tag{
position:absolute; top: var(--space-3); left: var(--space-3); z-index:2;
background: var(--color-accent); color:#fff; font-size:10.5px; font-weight:700;
letter-spacing:0.04em; text-transform:uppercase; padding: 5px 12px; border-radius: var(--radius-full);
opacity:0; transform: translateY(-6px); transition: all 250ms ease;
}
.gallery-item:hover .gallery-cat-tag{ opacity:1; transform: translateY(0); }
.gallery-item .gallery-caption{
position:absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index:2;
opacity:0; transform: translateY(8px); transition: all 250ms ease;
}
.gallery-item:hover .gallery-caption{ opacity:1; transform: translateY(0); }
.gallery-item .gallery-caption h4{ font-family: var(--font-body); font-size:14.5px; font-weight:700; color:#fff; line-height:1.3; }
.gallery-item .zoom{ z-index:2; }
.gallery-item.is-hidden{ display:none; }
@media (max-width: 720px){
.gallery-filter{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.gallery-filter a{ flex-shrink:0; }
}