/* =====================================================================
SPC FASHION ART — style.css (single consolidated stylesheet)
Brand: Shree Parshavnath Creations — Since 1890
Design language: Heritage Luxury (Maroon + Gold + Cream)
Every component shipped with responsive rules inline.
===================================================================== */
/* =====================================================================
1. DESIGN TOKENS
===================================================================== */
:root{
/* Brand palette — heritage maroon + gold + cream */
--maroon-deep: #6B0E1F;
--maroon: #831822;
--maroon-2: #9B1B30;
--burgundy: #B91C2C;
--red-accent: #C8252F;
--gold: #BC8F4D;
--gold-light: #D4AB6A;
--gold-deep: #8E6831;
--cream: #FAF5EC;
--cream-2: #F2E9D6;
--cream-3: #E8DECD;
/* Neutrals */
--ink: #1A1A1A;
--body: #4A4A4A;
--muted: #8A8A8A;
--line: #E5DDD0;
--line-2: #EFE7D7;
--bg: #FFFFFF;
--bg-soft: #FAF5EC;
--bg-dark: #2A0810;
/* Signal */
--whatsapp: #25D366;
--success: #16A34A;
/* Type */
--font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
--font-script: 'Pinyon Script', 'Dancing Script', cursive;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Gradient signatures */
--grad-maroon: linear-gradient(135deg, #6B0E1F 0%, #9B1B30 100%);
--grad-gold: linear-gradient(135deg, #BC8F4D 0%, #D4AB6A 100%);
/* Layout */
--container-w: 1280px;
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 18px;
--radius-xl: 28px;
/* Shadows */
--shadow-sm: 0 4px 10px -4px rgba(107,14,31,.10);
--shadow: 0 14px 30px -12px rgba(107,14,31,.18);
--shadow-lg: 0 26px 56px -24px rgba(107,14,31,.30);
--shadow-maroon: 0 14px 30px -10px rgba(131,24,34,.40);
}
/* =====================================================================
2. RESET + BASE
===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
font-family:var(--font-body);
font-size:15px;
line-height:1.65;
color:var(--body);
background:var(--bg);
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:clip;
}
img,svg,video{max-width:100%;display:block;}
a{color:var(--maroon);text-decoration:none;transition:color .25s;}
a:hover{color:var(--burgundy);}
ul,ol{list-style:none;}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit;}
input,textarea,select{font-family:inherit;font-size:inherit;}
h1,h2,h3,h4,h5,h6{
font-family:var(--font-display);
color:var(--ink);
line-height:1.2;
letter-spacing:-.005em;
font-weight:600;
}
h1{font-size:clamp(2rem, 4.4vw, 3.4rem);}
h2{font-size:clamp(1.7rem, 3.2vw, 2.5rem);}
h3{font-size:clamp(1.3rem, 2.2vw, 1.7rem);}
h4{font-size:1.15rem;}
h5{font-size:1rem;}
p{margin:0 0 .9em;}
::selection{background:var(--maroon);color:#fff;}
/* =====================================================================
3. LAYOUT PRIMITIVES
===================================================================== */
.container{max-width:var(--container-w);margin:0 auto;padding:0 24px;width:100%;}
.section{padding:90px 0;background:var(--cream);}
.section-cream{background:var(--cream);}
.section-cream-2{background:var(--cream-2);}
.section-maroon{background:var(--maroon-deep);color:#fff;}
.section-maroon h1,.section-maroon h2,.section-maroon h3,.section-maroon h4{color:#fff;}
/* Section heading (eyebrow + h2 + decorative diamond) */
.sec-head{text-align:center;margin:0 auto 50px;max-width:680px;}
.sec-head h2{
font-family:var(--font-display);
font-size:clamp(1.65rem, 3vw, 2.2rem);
font-weight:600;
color:var(--ink);
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:14px;
position:relative;
display:inline-block;
padding:0 36px;
}
.sec-head h2::before,.sec-head h2::after{
content:"";position:absolute;top:50%;width:24px;height:1px;background:var(--gold);
}
.sec-head h2::before{left:0;}
.sec-head h2::after{right:0;}
.sec-head .diamond{
display:inline-block;width:6px;height:6px;background:var(--gold);
transform:rotate(45deg);margin:0 8px;vertical-align:middle;
}
.sec-head p{color:var(--muted);font-size:.95rem;max-width:560px;margin:0 auto;}
.section-maroon .sec-head h2{color:#fff;}
.section-maroon .sec-head h2::before,
.section-maroon .sec-head h2::after{background:var(--gold-light);}
@media (max-width:768px){
.section{padding:60px 0;}
.container{padding:0 18px;}
.sec-head{margin-bottom:36px;}
.sec-head h2{padding:0 28px;letter-spacing:.02em;}
}
/* =====================================================================
4. BUTTONS
===================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:14px 26px;
border-radius:6px;
font-family:var(--font-body);font-size:.82rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
cursor:pointer;text-decoration:none;line-height:1;
transition:transform .25s, box-shadow .3s, background .25s, color .25s;
border:0;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn i{font-size:.88rem;}
.btn-primary{background:var(--maroon);color:#fff;box-shadow:var(--shadow-maroon);}
.btn-primary:hover{background:var(--maroon-deep);color:#fff;box-shadow:0 18px 36px -12px rgba(107,14,31,.55);}
.btn-light{background:var(--cream);color:var(--maroon);border:1px solid var(--line);}
.btn-light:hover{background:#fff;border-color:var(--maroon);color:var(--maroon-deep);}
.btn-outline{background:transparent;color:var(--maroon);border:1.5px solid var(--maroon);}
.btn-outline:hover{background:var(--maroon);color:#fff;}
.btn-gold{background:var(--gold);color:#fff;}
.btn-gold:hover{background:var(--gold-deep);color:#fff;}
.btn-sm{padding:10px 18px;font-size:.74rem;}
.btn-lg{padding:16px 32px;font-size:.88rem;}
@media (max-width:560px){
.btn{padding:12px 20px;font-size:.74rem;letter-spacing:.1em;}
.btn-lg{padding:14px 26px;font-size:.78rem;}
}
/* =====================================================================
5. PRELOADER
===================================================================== */
.preloader{
position:fixed;inset:0;z-index:9999;
background:var(--cream);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
transition:opacity .5s, visibility .5s;
}
.preloader.done{opacity:0;visibility:hidden;}
.preloader-logo{
width:64px;height:64px;border-radius:50%;
background:var(--grad-maroon);
display:grid;place-items:center;color:#fff;
font-family:var(--font-script);font-size:1.7rem;font-weight:400;
animation:plPulse 1.6s infinite ease-in-out;
}
.preloader-bar{
width:170px;height:2px;background:var(--line);border-radius:1px;
overflow:hidden;position:relative;
}
.preloader-bar::after{
content:"";position:absolute;inset:0;width:40%;
background:var(--grad-maroon);
animation:plLoad 1.2s infinite;
}
@keyframes plPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes plLoad{0%{left:-40%;}100%{left:100%;}}
/* =====================================================================
6. TOPBAR (announcement strip)
===================================================================== */
.topbar{
background:var(--maroon-deep);color:#fff;
font-family:var(--font-body);font-size:.74rem;
letter-spacing:.04em;
}
.topbar-row{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:10px 0;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.topbar-item{display:inline-flex;align-items:center;gap:7px;color:#fff;}
.topbar-item i{color:var(--gold-light);font-size:.7rem;}
.topbar-divider{display:inline-block;width:1px;height:12px;background:rgba(255,255,255,.18);}
.topbar-social{display:flex;gap:10px;}
.topbar-social a{
color:#fff;font-size:.82rem;
width:24px;height:24px;display:grid;place-items:center;
border-radius:50%;transition:background .25s, color .25s;
}
.topbar-social a:hover{background:var(--gold);color:var(--maroon-deep);}
@media (max-width:860px){
.topbar-left{display:none;}
.topbar-row{justify-content:center;}
}
/* =====================================================================
7. NAVBAR
===================================================================== */
.nav-wrap{
position:sticky;top:0;z-index:100;
background:#fff;
border-bottom:1px solid var(--line);
transition:box-shadow .3s;
}
.nav-wrap.scrolled{box-shadow:0 10px 28px -16px rgba(107,14,31,.18);}
.nav{
display:flex;align-items:center;justify-content:space-between;gap:22px;
padding:5px 0;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand-logo{height:56px;width:auto;display:block;}
.brand-fallback{
display:flex;flex-direction:column;line-height:1.1;text-decoration:none;
}
.brand-fallback-script{
font-family:var(--font-script);
font-size:1.35rem;color:var(--maroon);font-weight:400;
}
.brand-fallback-caps{
font-family:var(--font-body);font-size:.62rem;font-weight:600;
letter-spacing:.34em;color:var(--ink);margin-top:2px;
}
.brand-fallback-since{
font-family:var(--font-body);font-size:.6rem;font-weight:600;
letter-spacing:.18em;color:var(--gold);margin-top:3px;
}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links > li{position:relative;}
.nav-links > li > a,.nav-links > li > button{
font-family:var(--font-body);font-size:.78rem;font-weight:600;
color:var(--ink);
padding:14px 16px;
letter-spacing:.14em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:7px;
position:relative;transition:color .25s;
background:transparent;border:0;cursor:pointer;
}
.nav-links > li > a::after,.nav-links > li > button::after{
content:"";position:absolute;left:50%;bottom:8px;width:0;height:2px;
background:var(--maroon);transition:width .3s, left .3s;
}
.nav-links > li > a:hover,.nav-links > li.active > a,
.nav-links > li > button:hover{color:var(--maroon);}
.nav-links > li > a:hover::after,.nav-links > li.active > a::after,
.nav-links > li > button:hover::after{width:60%;left:20%;}
.nav-links a i.fa-chevron-down{font-size:.55rem;}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-cta-call{
display:flex;align-items:center;gap:10px;text-decoration:none;
background:var(--cream);padding:9px 16px;border-radius:8px;
border:1px solid var(--line);
transition:border-color .25s, background .25s;
}
.nav-cta-call:hover{border-color:var(--maroon);background:#fff;}
.nav-cta-call-ic{
width:38px;height:38px;border-radius:50%;
background:var(--grad-maroon);color:#fff;
display:grid;place-items:center;font-size:.95rem;
flex-shrink:0;
}
.nav-cta-call-text{display:flex;flex-direction:column;line-height:1.15;}
.nav-cta-call-text small{
font-family:var(--font-body);font-size:.62rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.nav-cta-call-text strong{
font-family:var(--font-body);font-size:.92rem;font-weight:700;
color:var(--maroon);letter-spacing:.01em;
}
.hamburger{
display:none;
width:44px;height:44px;border-radius:8px;
align-items:center;justify-content:center;
background:var(--cream);color:var(--maroon);font-size:1.05rem;
transition:background .25s, color .25s;
}
.hamburger:hover{background:var(--maroon);color:#fff;}
@media (max-width:1024px){
.nav-links,.nav-cta-call-text{display:none;}
.nav-cta-call{padding:6px 12px;}
.nav-cta-call-ic{width:34px;height:34px;font-size:.88rem;}
.hamburger{display:flex;}
}
@media (max-width:560px){
.brand-logo{height:46px;}
.brand-fallback-script{font-size:1.1rem;}
}
/* =====================================================================
8. MEGA MENU (Collections dropdown)
===================================================================== */
.mega{
position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
min-width:860px;
background:#fff;
border:1px solid var(--line);border-radius:14px;
box-shadow:var(--shadow-lg);
padding:26px;
opacity:0;visibility:hidden;
transition:opacity .3s, visibility .3s, transform .3s;
z-index:50;
}
.nav-links > li:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.mega-col h6{
font-family:var(--font-display);font-size:.95rem;font-weight:600;
color:var(--maroon);
padding-bottom:10px;margin-bottom:10px;
border-bottom:1px solid var(--line);
text-transform:uppercase;letter-spacing:.06em;
}
.mega-col ul li a{
display:block;
padding:6px 10px;
font-size:.82rem;font-weight:500;color:var(--body);
border-radius:5px;transition:all .25s;
}
.mega-col ul li a:hover{background:var(--cream);color:var(--maroon);padding-left:14px;}
/* =====================================================================
9. DRAWER (mobile menu)
===================================================================== */
.drawer-overlay{
position:fixed;inset:0;background:rgba(42,8,16,.55);
opacity:0;visibility:hidden;transition:.3s;z-index:200;
backdrop-filter:blur(4px);
}
.drawer-overlay.open{opacity:1;visibility:visible;}
.drawer{
position:fixed;top:0;right:0;height:100vh;
width:min(360px, 86vw);
background:#fff;
z-index:201;
transform:translateX(100%);
transition:transform .35s cubic-bezier(.4,1,.6,1);
display:flex;flex-direction:column;
box-shadow:-20px 0 50px -20px rgba(107,14,31,.3);
}
.drawer.open{transform:translateX(0);}
.drawer-head{
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;border-bottom:1px solid var(--line);
}
.drawer-brand{display:inline-flex;align-items:center;text-decoration:none;}
.drawer-brand img{
height:44px;width:auto;display:block;
}
.drawer-close{
width:38px;height:38px;border-radius:50%;
background:var(--cream);color:var(--maroon);
display:grid;place-items:center;
transition:background .25s, transform .25s;
}
.drawer-close:hover{background:var(--maroon);color:#fff;transform:rotate(90deg);}
.drawer-links{flex:1;overflow-y:auto;padding:14px;}
.drawer-links li a{
display:flex;align-items:center;justify-content:space-between;
padding:14px 16px;
font-family:var(--font-body);font-size:.85rem;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;
color:var(--ink);border-radius:8px;
transition:background .25s, color .25s;
}
.drawer-links li a:hover,.drawer-links li.active a{background:var(--cream);color:var(--maroon);}
.drawer-foot{padding:18px 22px;border-top:1px solid var(--line);}
.drawer-foot .btn{width:100%;}
/* =====================================================================
10. HERO SECTION — Full-width banner carousel only
===================================================================== */
.hero{
position:relative;overflow:hidden;
background:var(--cream);
width:100%;
}
.hero-slider{
position:relative;
display:grid;
width:100%;
}
.hero-slide{
grid-column:1;grid-row:1;
opacity:0;visibility:hidden;
transition:opacity .9s, visibility .9s;
width:100%;
}
.hero-slide.active{opacity:1;visibility:visible;}
.hero-slide img{
width:100%;
height:auto;
display:block;
}
/* Slider arrows */
.hero-arrows{
position:absolute;top:50%;transform:translateY(-50%);
left:0;right:0;
display:flex;justify-content:space-between;
padding:0 24px;
pointer-events:none;
z-index:5;
}
.hero-arrow{
width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.92);color:var(--maroon);
display:grid;place-items:center;border:0;cursor:pointer;
font-size:.95rem;
box-shadow:var(--shadow);
transition:background .25s, color .25s, transform .25s;
pointer-events:auto;
}
.hero-arrow:hover{background:var(--maroon);color:#fff;transform:scale(1.08);}
.hero-dots{
position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
display:flex;gap:8px;z-index:5;
}
.hero-dot{
width:8px;height:8px;border-radius:50%;
background:rgba(255,255,255,.55);cursor:pointer;
transition:background .25s, width .25s;
box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.hero-dot.active{background:var(--gold);width:24px;border-radius:4px;}
@media (max-width:860px){
.hero-arrows{padding:0 12px;}
.hero-arrow{width:40px;height:40px;font-size:.82rem;}
.hero-dots{bottom:12px;}
}
@media (max-width:560px){
.hero-arrow{width:34px;height:34px;font-size:.74rem;}
.hero-dot{width:6px;height:6px;}
.hero-dot.active{width:18px;}
}
/* =====================================================================
11. LEGACY TIMELINE SECTION (compact + image bleeds into bg)
===================================================================== */
.legacy{
padding:40px 0;
background:#F2E8D2; /* matches image parchment cream */
position:relative;overflow:hidden;
}
.legacy .container{position:relative;z-index:1;}
.legacy-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:center;}
/* CONTENT (LEFT) */
.legacy-eyebrow{
display:inline-flex;align-items:center;gap:12px;
font-family:var(--font-body);font-size:.68rem;font-weight:700;
letter-spacing:.34em;text-transform:uppercase;color:var(--maroon);
margin-bottom:12px;
}
.legacy-eyebrow::before{
content:"";width:32px;height:1px;background:var(--gold);display:inline-block;
}
.legacy-content h2{
font-family:var(--font-display);font-size:clamp(1.7rem, 3vw, 2.4rem);
color:var(--maroon-deep);margin-bottom:10px;font-weight:600;line-height:1.15;
}
.legacy-content h2 .since{color:var(--gold);font-style:italic;font-weight:500;}
.legacy-underline{
display:block;width:54px;height:3px;
background:linear-gradient(90deg, var(--maroon) 0%, var(--gold) 100%);
border-radius:2px;margin-bottom:16px;
}
.legacy-content p{
font-family:var(--font-body);font-size:.96rem;line-height:1.7;
color:var(--body);margin-bottom:14px;max-width:520px;
}
/* Italic pull-quote */
.legacy-quote{
font-family:var(--font-display);font-style:italic;
font-size:1rem;color:var(--maroon-deep);
border-left:2px solid var(--gold);
padding:4px 0 4px 16px;
margin:14px 0 18px;
max-width:480px;line-height:1.5;
}
.legacy-quote::before{content:"\201C";color:var(--gold);font-size:1.3rem;margin-right:3px;font-weight:700;}
.legacy-quote::after{content:"\201D";color:var(--gold);font-size:1.3rem;margin-left:2px;font-weight:700;}
/* IMAGE (RIGHT) — blends into bg, no border/radius/overlay */
.legacy-img{position:relative;}
.legacy-img img{
width:100%;height:auto;display:block;
background:transparent;
mix-blend-mode:multiply; /* helps blend with cream bg if image has slight tint */
}
/* CTA + Timeline group */
.legacy-cta{
display:inline-flex;align-items:center;gap:8px;
margin-top:4px;
font-family:var(--font-body);font-size:.74rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);
text-decoration:none;
transition:gap .25s, color .25s;
}
.legacy-cta::after{
content:"";width:30px;height:1px;background:var(--maroon);
transition:width .3s, background .3s;
}
.legacy-cta:hover{color:var(--maroon-deep);gap:14px;}
.legacy-cta:hover::after{width:46px;background:var(--gold);}
.legacy-timeline{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
position:relative;margin-top:24px;padding-top:22px;
}
.legacy-timeline::before{
content:"";position:absolute;top:32px;left:6%;right:6%;height:1px;
background:repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px);
}
.legacy-step{text-align:center;position:relative;z-index:1;}
.legacy-step-dot{
width:22px;height:22px;border-radius:50%;
background:#fff;border:2px solid var(--gold);
margin:0 auto 10px;position:relative;
transition:transform .3s, box-shadow .3s;
}
.legacy-step:hover .legacy-step-dot{transform:scale(1.18);box-shadow:0 0 0 6px rgba(188,143,77,.18);}
.legacy-step-dot::after{
content:"";width:8px;height:8px;border-radius:50%;
background:var(--maroon);
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
transition:background .3s;
}
.legacy-step:hover .legacy-step-dot::after{background:var(--gold);}
.legacy-step:last-child .legacy-step-dot{
background:var(--maroon);border-color:var(--maroon);
box-shadow:0 0 0 5px rgba(107,14,31,.12);
}
.legacy-step:last-child .legacy-step-dot::after{background:var(--gold);}
.legacy-step strong{
display:block;
font-family:var(--font-display);font-size:1.15rem;font-weight:700;
color:var(--maroon-deep);margin-bottom:2px;
}
.legacy-step:last-child strong{color:var(--maroon);}
.legacy-step span{
font-family:var(--font-body);font-size:.72rem;font-weight:500;
color:var(--muted);
}
@media (max-width:1024px){
.legacy-grid{gap:30px;}
}
@media (max-width:860px){
.legacy{padding:56px 0 46px;}
.legacy-grid{grid-template-columns:1fr;gap:32px;}
/* Eyebrow + heading prominence */
.legacy-eyebrow{font-size:.72rem;letter-spacing:.36em;}
.legacy-content h2{font-size:clamp(1.85rem, 6vw, 2.3rem);}
/* Quote — softer feel on mobile */
.legacy-quote{
background:rgba(255,255,255,.45);
border-left-width:3px;
padding:12px 16px 12px 18px;
border-radius:0 8px 8px 0;
}
/* CTA — proper pill button */
.legacy-cta{
padding:13px 26px;
border:1.5px solid var(--gold);
border-radius:100px;
background:rgba(255,255,255,.55);
color:var(--maroon-deep);
margin:18px 0 8px;
backdrop-filter:blur(3px);
box-shadow:0 8px 20px -12px rgba(107,14,31,.2);
}
.legacy-cta::after{display:none;}
.legacy-cta:hover{
background:var(--maroon);
color:#fff;
border-color:var(--maroon);
gap:14px;
box-shadow:0 12px 26px -10px rgba(107,14,31,.4);
}
.legacy-cta:hover::after{display:none;}
/* Timeline — premium cards */
.legacy-timeline{
grid-template-columns:repeat(2,1fr);
gap:14px;
padding-top:14px;
}
.legacy-timeline::before{display:none;}
.legacy-step{
background:rgba(255,255,255,.55);
border:1px solid rgba(188,143,77,.28);
border-radius:12px;
padding:20px 14px 16px;
box-shadow:0 6px 18px -12px rgba(107,14,31,.18);
transition:transform .35s, box-shadow .35s, border-color .35s;
position:relative;
overflow:hidden;
}
.legacy-step::after{
content:"";position:absolute;left:0;top:0;right:0;height:2px;
background:linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
opacity:0;transition:opacity .3s;
}
.legacy-step:hover{
transform:translateY(-3px);
border-color:var(--gold);
box-shadow:0 16px 30px -14px rgba(107,14,31,.28);
}
.legacy-step:hover::after{opacity:1;}
.legacy-step-dot{margin-bottom:10px;}
.legacy-step strong{font-size:1.55rem;margin-bottom:4px;}
.legacy-step span{font-size:.74rem;letter-spacing:.02em;}
/* TODAY step — present-day accent */
.legacy-step:last-child{
background:linear-gradient(135deg, rgba(107,14,31,.07) 0%, rgba(188,143,77,.12) 100%);
border-color:rgba(107,14,31,.4);
box-shadow:0 10px 24px -12px rgba(107,14,31,.32), inset 0 0 0 1px rgba(255,255,255,.4);
}
.legacy-step:last-child::before{
content:"Present Day";
position:absolute;top:-1px;right:-1px;
background:var(--maroon);
color:var(--gold-light);
font-family:var(--font-body);
font-size:.52rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
padding:5px 10px 5px 12px;
border-radius:0 11px 0 10px;
box-shadow:0 4px 10px -4px rgba(107,14,31,.4);
z-index:2;
}
.legacy-step:last-child .legacy-step-dot{
box-shadow:0 0 0 5px rgba(107,14,31,.16), 0 0 16px rgba(188,143,77,.4);
}
.legacy-step:last-child strong{
background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-2) 100%);
-webkit-background-clip:text;background-clip:text;
color:transparent;
font-style:italic;
}
}
@media (max-width:560px){
.legacy{padding:44px 0 36px;}
.legacy-quote{font-size:.92rem;padding:10px 14px 10px 16px;}
.legacy-step{padding:18px 12px 14px;}
.legacy-step strong{font-size:1.4rem;}
}
/* =====================================================================
12. SHOP BY COLLECTION
===================================================================== */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.shop-card{
background:#fff;border:1px solid var(--line);border-radius:10px;
overflow:hidden;
transition:transform .4s, box-shadow .4s, border-color .4s;
position:relative;
display:flex;flex-direction:column;
cursor:pointer;
text-decoration:none;
color:inherit;
}
.shop-card:hover{
transform:translateY(-8px);
box-shadow:0 26px 50px -22px rgba(107,14,31,.28);
border-color:var(--gold);
text-decoration:none;
color:inherit;
}
.shop-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
/* IMAGE — square, fills evenly */
.shop-card-img{
position:relative;
aspect-ratio:1/1;
overflow:hidden;
background:var(--cream);
}
.shop-card-img img{
width:100%;height:100%;
object-fit:cover;object-position:center;
transition:transform .8s cubic-bezier(.2,.8,.2,1);
display:block;
}
.shop-card:hover .shop-card-img img{transform:scale(1.06);}
/* BODY — centered, gold hairline accent */
.shop-card-body{
padding:22px 22px 24px;
text-align:center;
background:#fff;
position:relative;
flex:1;
display:flex;flex-direction:column;justify-content:center;
}
.shop-card-body::before{
content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
width:36px;height:1px;background:var(--gold);
}
.shop-card-body h4{
font-family:var(--font-display);
font-size:1rem;font-weight:700;
color:var(--maroon-deep);
letter-spacing:.06em;text-transform:uppercase;
margin-bottom:6px;line-height:1.3;
transition:color .3s;
}
.shop-card:hover .shop-card-body h4{color:var(--maroon);}
.shop-card-body p{
font-family:var(--font-display);font-style:italic;
font-size:.85rem;color:var(--gold-deep);
margin-bottom:14px;
}
.shop-card-link{
font-family:var(--font-body);
font-size:.7rem;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;color:var(--maroon);
display:inline-flex;align-items:center;gap:7px;
padding:6px 0 2px;
border-bottom:1px solid transparent;
transition:color .3s, border-color .3s, gap .3s;
align-self:center;
}
.shop-card:hover .shop-card-link{
color:var(--gold-deep);
border-bottom-color:var(--gold);
gap:14px;
}
.shop-card-link i{font-size:.62rem;transition:transform .3s;}
.shop-card:hover .shop-card-link i{transform:translateX(2px);}
@media (max-width:1024px){.shop-grid{grid-template-columns:repeat(2,1fr);gap:22px;}}
@media (max-width:560px){.shop-grid{grid-template-columns:1fr;gap:20px;}
.shop-card-img{aspect-ratio:1/.7;}
}
/* =====================================================================
13. WHY CHOOSE US — Editorial Heritage (split-screen, fills viewport)
Layout: Left = brand pillar | Right = Roman numeral feature cards
===================================================================== */
.why{
min-height:calc(100vh - 124px); /* navbar (44 topbar + 80 nav) = 124px */
background:
radial-gradient(ellipse at 20% 20%, rgba(188,143,77,.16) 0%, transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(188,143,77,.10) 0%, transparent 55%),
linear-gradient(155deg, #5C0813 0%, #6B0E1F 50%, #4A0712 100%);
color:#fff;
position:relative;overflow:hidden;
display:flex;align-items:center;
padding:50px 0;
}
/* Damask gold pattern (woven silk feel) */
.why::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:140px 140px;
opacity:.55;
mix-blend-mode:overlay;
}
/* Corner gold ornaments — large L-shaped brackets */
.why-corner{
position:absolute;width:80px;height:80px;
pointer-events:none;z-index:2;
opacity:.45;
}
.why-corner-tl{top:26px;left:26px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);border-top-left-radius:4px;}
.why-corner-tr{top:26px;right:26px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);border-top-right-radius:4px;}
.why-corner-bl{bottom:26px;left:26px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);border-bottom-left-radius:4px;}
.why-corner-br{bottom:26px;right:26px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);border-bottom-right-radius:4px;}
.why .container{position:relative;z-index:3;width:100%;}
/* MAIN SPLIT GRID */
.why-layout{
display:grid;grid-template-columns:.8fr 1.2fr;
gap:60px;align-items:center;
}
/* ── LEFT: Brand Pillar ─────────────────────────────── */
.why-left{position:relative;padding:0 10px 0 30px;}
.why-left::before{
content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;
background:linear-gradient(180deg, transparent 0%, rgba(188,143,77,.45) 25%, rgba(188,143,77,.45) 75%, transparent 100%);
}
.why-monogram{
display:inline-block;margin-bottom:18px;
position:relative;
}
.why-monogram-est{
font-family:var(--font-body);
font-size:.65rem;font-weight:700;
color:var(--gold);
letter-spacing:.5em;text-transform:uppercase;
display:block;margin-bottom:2px;
}
.why-monogram-year{
font-family:var(--font-display);
font-size:3.2rem;font-weight:700;
color:var(--gold-light);
letter-spacing:.04em;line-height:1;
text-shadow:0 0 22px rgba(188,143,77,.45);
}
.why-monogram::after{
content:"";display:block;width:48px;height:1px;
background:linear-gradient(90deg, var(--gold) 0%, transparent 100%);
margin-top:10px;
}
.why-left h2{
font-family:var(--font-display);
font-size:clamp(1.6rem, 3vw, 2.3rem);
font-weight:600;
color:var(--gold-light);
letter-spacing:.04em;text-transform:uppercase;
line-height:1.18;
margin-bottom:18px;
text-shadow:0 0 22px rgba(188,143,77,.22), 0 2px 4px rgba(0,0,0,.4);
}
.why-left h2 .em{
display:block;
font-family:var(--font-display);font-style:italic;font-weight:400;
color:var(--gold);text-transform:none;letter-spacing:.01em;
font-size:.55em;margin-top:2px;
}
.why-left p{
font-family:var(--font-body);
font-size:.95rem;line-height:1.7;
color:rgba(255,255,255,.72);
margin-bottom:22px;max-width:380px;
}
.why-cta{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-body);font-size:.72rem;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;
color:var(--gold-light);text-decoration:none;
padding-bottom:6px;
border-bottom:1px solid var(--gold);
transition:color .3s, gap .3s, border-color .3s;
}
.why-cta:hover{color:#FFE0A8;gap:16px;border-color:var(--gold-light);}
.why-cta i{font-size:.65rem;transition:transform .3s;}
.why-cta:hover i{transform:translateX(3px);}
/* ── RIGHT: 6 Numbered Cards ─────────────────────────── */
.why-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.why-card{
display:grid;grid-template-columns:auto 1fr;
gap:14px;align-items:start;
background:linear-gradient(135deg, rgba(188,143,77,.06) 0%, rgba(0,0,0,.18) 100%);
border:1px solid rgba(188,143,77,.28);
border-radius:6px;
padding:18px 16px;
position:relative;overflow:hidden;
transition:transform .35s, border-color .35s, box-shadow .35s;
}
.why-card::before{
content:"";position:absolute;left:0;top:0;width:100%;height:1px;
background:linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
opacity:0;transition:opacity .35s;
}
.why-card:hover{
transform:translateY(-3px);
border-color:rgba(188,143,77,.6);
box-shadow:0 14px 28px -14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,224,168,.08);
}
.why-card:hover::before{opacity:1;}
.why-num{
position:relative;
width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;
background:radial-gradient(circle, rgba(188,143,77,.16) 0%, rgba(255,255,255,.04) 75%);
border:1px solid rgba(188,143,77,.55);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.05),
inset 0 0 14px rgba(188,143,77,.18);
align-self:center;
flex-shrink:0;
transition:transform .4s cubic-bezier(.3,1,.4,1), border-color .3s, box-shadow .3s;
}
.why-num i{
font-size:1.1rem;color:var(--gold-light);
text-shadow:0 0 10px rgba(188,143,77,.5);
transition:color .3s, transform .35s, text-shadow .3s;
}
.why-card:hover .why-num{
border-color:var(--gold-light);
transform:rotate(-6deg) scale(1.06);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.1),
inset 0 0 18px rgba(188,143,77,.3),
0 6px 18px -8px rgba(188,143,77,.4);
}
.why-card:hover .why-num i{
color:#FFE0A8;
text-shadow:0 0 14px rgba(255,224,168,.7);
}
.why-text{display:flex;flex-direction:column;}
.why-text h5{
font-family:var(--font-display);
font-size:.86rem;font-weight:700;
color:var(--gold-light);
letter-spacing:.05em;text-transform:uppercase;
line-height:1.3;margin:0 0 5px;
}
.why-text span{
font-family:var(--font-display);font-style:italic;
font-size:.78rem;color:rgba(255,255,255,.6);
line-height:1.45;
}
@media (max-width:1024px){
.why{min-height:auto;padding:50px 0;}
.why-corner{display:none;}
.why-layout{grid-template-columns:1fr;gap:36px;}
.why-left{padding:0;}
.why-left::before{display:none;}
.why-cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
.why{padding:36px 0;}
.why-cards{grid-template-columns:1fr;}
.why-monogram-year{font-size:1.5rem;}
}
/* =====================================================================
14. FEATURED PRODUCTS (clickable product cards)
===================================================================== */
.featured{position:relative;}
.featured-track{
display:flex;flex-wrap:nowrap;
gap:22px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding:4px 2px 8px;
}
.featured-track::-webkit-scrollbar{display:none;}
.featured-card{
flex:0 0 calc((100% - 66px) / 4); /* 4 visible (3 gaps of 22px = 66px) */
background:#fff;border:1px solid var(--line);border-radius:10px;
overflow:hidden;
display:flex;flex-direction:column;
text-decoration:none;color:inherit;
cursor:pointer;
transition:transform .4s, box-shadow .4s, border-color .4s;
position:relative;
}
.featured-card:hover{
transform:translateY(-6px);
box-shadow:0 22px 44px -20px rgba(107,14,31,.28);
border-color:var(--gold);
text-decoration:none;color:inherit;
}
.featured-card-img{
position:relative;aspect-ratio:1/1;
overflow:hidden;background:var(--cream);
}
.featured-card-img img{
width:100%;height:100%;object-fit:cover;
transition:transform .8s cubic-bezier(.2,.8,.2,1);
display:block;
}
.featured-card:hover .featured-card-img img{transform:scale(1.07);}
.featured-card-body{
padding:16px 18px 18px;
text-align:center;
background:#fff;
position:relative;
}
.featured-card-body::before{
content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
width:32px;height:1px;background:var(--gold);
}
.featured-card-body h5{
font-family:var(--font-display);
font-size:.92rem;font-weight:700;
color:var(--maroon-deep);
letter-spacing:.03em;
margin-bottom:8px;line-height:1.3;
text-transform:none;
transition:color .3s;
/* clamp to 2 lines */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:2.4em;
}
.featured-card:hover .featured-card-body h5{color:var(--maroon);}
.featured-card-cta{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--font-body);font-size:.66rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
transition:color .3s, gap .3s;
}
.featured-card-cta i{font-size:.56rem;transition:transform .3s;}
.featured-card:hover .featured-card-cta{color:var(--maroon);gap:12px;}
.featured-card:hover .featured-card-cta i{transform:translateX(2px);}
.featured-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:44px;height:44px;border-radius:50%;
background:#fff;color:var(--maroon);border:1px solid var(--line);
display:grid;place-items:center;cursor:pointer;
box-shadow:var(--shadow);font-size:.85rem;
transition:background .25s, color .25s, transform .25s, border-color .25s;
z-index:3;
}
.featured-arrow:hover{background:var(--maroon);color:#fff;border-color:var(--maroon);transform:translateY(-50%) scale(1.08);}
.featured-arrow-prev{left:-20px;}
.featured-arrow-next{right:-20px;}
/* Featured banner — full width, actual aspect ratio, clickable */
.featured-banner{
width:100%;
display:block;
margin:0;padding:0;
overflow:hidden;
}
.featured-banner > a{
display:block;
cursor:pointer;
text-decoration:none;
overflow:hidden;
}
.featured-banner img{
width:100%;
height:auto;
display:block;
transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .4s;
}
.featured-banner > a:hover img{
transform:scale(1.02);
filter:brightness(1.04);
}
@media (max-width:1024px){
.featured-track{gap:18px;}
.featured-card{flex-basis:calc((100% - 36px) / 3);} /* 3 visible (2 gaps of 18px) */
.featured-arrow-prev{left:4px;}
.featured-arrow-next{right:4px;}
}
@media (max-width:768px){
.featured-card{flex-basis:calc((100% - 18px) / 2);} /* 2 visible (1 gap) */
}
@media (max-width:560px){
.featured-track{gap:14px;}
.featured-card{flex-basis:80%;} /* 1.25 visible — peek of next */
.featured-card-img{aspect-ratio:1/.85;}
}
/* =====================================================================
15. MANUFACTURING EXCELLENCE & WHY PARTNER (merged)
===================================================================== */
.excellence{background:var(--cream);}
/* 5-step process flow */
.excellence-steps{
display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
position:relative;margin:0 auto 50px;max-width:1080px;
}
.excellence-steps::before{
content:"";position:absolute;top:40px;left:10%;right:10%;height:1px;
background:repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px);
z-index:0;
}
.process-step{position:relative;text-align:center;z-index:1;}
.process-step-ic{
width:80px;height:80px;border-radius:50%;
background:#fff;border:1px solid var(--line);
color:var(--maroon);
display:grid;place-items:center;font-size:1.5rem;
margin:0 auto 14px;
transition:background .25s, color .25s, transform .25s, border-color .25s;
}
.process-step:hover .process-step-ic{
background:var(--maroon);color:#fff;border-color:var(--maroon);
transform:translateY(-4px);
}
.process-step h6{
font-family:var(--font-display);font-size:.92rem;font-weight:700;
color:var(--ink);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;
}
.process-step span{
font-family:var(--font-body);font-size:.74rem;color:var(--muted);line-height:1.45;
display:block;
max-width:160px;margin:0 auto;
}
/* Ornamental gold divider between process and partner */
.excellence-divider{
display:flex;align-items:center;justify-content:center;gap:14px;
margin:0 auto 50px;max-width:520px;
}
.excellence-divider span{
flex:1;height:1px;
background:linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}
.excellence-divider i{
color:var(--gold);font-size:.85rem;
}
@media (max-width:1024px){
.excellence-steps{grid-template-columns:repeat(3,1fr);gap:30px 14px;}
.excellence-steps::before{display:none;}
.excellence-divider{margin-bottom:36px;}
}
@media (max-width:560px){
.excellence-steps{grid-template-columns:repeat(2,1fr);margin-bottom:36px;}
/* Last step (Worldwide Delivery) alone in its row → span 2 cols + center */
.excellence-steps .process-step:last-child{
grid-column:1 / -1;
justify-self:center;
max-width:240px;
}
}
/* =====================================================================
16. WHY PARTNER + STATS
===================================================================== */
.partner-grid{display:grid;grid-template-columns:1fr 1.1fr 1.1fr;gap:40px;align-items:center;}
.partner-left h2{
font-family:var(--font-display);font-size:clamp(1.7rem, 3vw, 2.3rem);
color:var(--maroon-deep);font-weight:600;margin-bottom:22px;letter-spacing:.04em;
text-transform:uppercase;
}
.partner-list{display:flex;flex-direction:column;gap:12px;}
.partner-list li{
display:flex;align-items:center;gap:12px;
font-family:var(--font-body);font-size:.95rem;color:var(--body);
}
.partner-list li i{
width:22px;height:22px;border-radius:50%;
background:var(--maroon);color:#fff;
display:grid;place-items:center;font-size:.6rem;flex-shrink:0;
}
.partner-badge{
background:var(--maroon-deep);color:#fff;border-radius:14px;
padding:36px 28px;text-align:center;
position:relative;overflow:hidden;
}
.partner-badge::before{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 50% 50%, rgba(188,143,77,.18), transparent 70%);
}
.partner-badge-laurel{
width:140px;height:140px;border-radius:50%;
border:2px solid var(--gold);
display:grid;place-items:center;
margin:0 auto 10px;position:relative;z-index:1;
}
.partner-badge-laurel::before,.partner-badge-laurel::after{
content:"";position:absolute;width:46px;height:60px;
background:radial-gradient(ellipse at center, var(--gold-light) 0%, transparent 65%);
opacity:.7;
}
.partner-badge-laurel::before{left:-6px;top:35px;transform:rotate(-20deg);}
.partner-badge-laurel::after{right:-6px;top:35px;transform:rotate(20deg);}
.partner-badge h3{
font-family:var(--font-display);font-size:2.8rem;font-weight:700;
color:#fff;line-height:1;
}
.partner-badge h3 span{display:block;font-size:.7rem;letter-spacing:.18em;color:var(--gold-light);font-weight:600;margin-top:4px;font-family:var(--font-body);text-transform:uppercase;}
.partner-badge-tag{
position:relative;z-index:1;
font-family:var(--font-body);font-size:.7rem;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);
}
.partner-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.partner-stat{
background:#fff;border:1px solid var(--line);border-radius:10px;
padding:24px 22px;text-align:left;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.partner-stat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--maroon);}
.partner-stat strong{
display:block;
font-family:var(--font-display);font-size:1.85rem;font-weight:700;
color:var(--maroon-deep);line-height:1;margin-bottom:4px;
}
.partner-stat span{
font-family:var(--font-body);font-size:.78rem;color:var(--muted);
letter-spacing:.04em;
}
@media (max-width:1024px){
.partner-grid{grid-template-columns:1fr;gap:30px;}
.partner-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
.partner-badge h3{font-size:2.2rem;}
.partner-stat strong{font-size:1.5rem;}
}
/* =====================================================================
16b. EXPORTS WORLDWIDE — country tiles grid
===================================================================== */
.exports{background:var(--cream-2);}
.exports-grid{
display:grid;grid-template-columns:repeat(5,1fr);
gap:18px;
}
.export-card{
display:flex;align-items:center;gap:14px;
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:14px 16px;
text-decoration:none;color:inherit;
cursor:pointer;
position:relative;
overflow:hidden;
transition:transform .35s, box-shadow .35s, border-color .35s;
}
.export-card::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--gold);
transform:scaleY(0);transform-origin:top;
transition:transform .4s cubic-bezier(.4,1,.6,1);
}
.export-card:hover{
transform:translateY(-4px);
box-shadow:0 20px 36px -20px rgba(107,14,31,.25);
border-color:var(--gold);
text-decoration:none;color:inherit;
}
.export-card:hover::before{transform:scaleY(1);}
.export-flag{
width:54px;height:38px;
border-radius:5px;overflow:hidden;
background:var(--cream);
display:grid;place-items:center;
flex-shrink:0;
box-shadow:0 4px 10px -4px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05);
}
.export-flag img{
width:100%;height:100%;
object-fit:cover;display:block;
}
.export-flag i{font-size:1.4rem;color:var(--maroon);}
.export-body{flex:1;min-width:0;}
.export-body h5{
font-family:var(--font-display);
font-size:1rem;font-weight:700;
color:var(--maroon-deep);
letter-spacing:.005em;
margin:0 0 3px;line-height:1.2;
}
.export-card:hover .export-body h5{color:var(--maroon);}
.export-tag{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-body);font-size:.66rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
transition:color .3s, gap .3s;
}
.export-tag i{font-size:.56rem;transition:transform .3s;}
.export-card:hover .export-tag{color:var(--maroon);gap:10px;}
.export-card:hover .export-tag i{transform:translateX(2px);}
@media (max-width:1024px){
.exports-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
.exports-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
.export-card{padding:12px 14px;gap:11px;}
.export-flag{width:46px;height:32px;}
.export-body h5{font-size:.92rem;}
}
@media (max-width:400px){
.exports-grid{grid-template-columns:1fr;}
}
/* =====================================================================
17. TESTIMONIALS — multi-card slide carousel (3 visible, autoplay)
===================================================================== */
.testi-viewport{
overflow:hidden;
padding:6px 4px 10px;
}
.testi-track{
display:flex;flex-wrap:nowrap;
gap:22px;
transition:transform .6s cubic-bezier(.4,1,.6,1);
will-change:transform;
}
.testi-card{
flex:0 0 calc((100% - 44px) / 3); /* 3 visible (2 gaps × 22px = 44px) */
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:26px 22px 24px;
display:flex;flex-direction:column;
box-shadow:0 8px 20px -14px rgba(107,14,31,.16);
transition:transform .35s, box-shadow .35s, border-color .35s;
position:relative;
}
.testi-card::before{
content:"\201C";
position:absolute;top:14px;right:22px;
font-family:var(--font-display);font-size:3.4rem;
color:var(--gold);opacity:.32;line-height:1;font-weight:700;
}
.testi-card:hover{
transform:translateY(-4px);
box-shadow:0 22px 40px -20px rgba(107,14,31,.28);
border-color:var(--gold);
}
.testi-stars{
display:flex;gap:3px;
color:var(--gold);font-size:.85rem;
margin-bottom:12px;
}
.testi-card p{
font-family:var(--font-display);font-style:italic;
font-size:.95rem;line-height:1.65;
color:var(--maroon-deep);margin-bottom:20px;
flex:1;
}
.testi-author{
display:flex;align-items:center;gap:12px;
padding-top:14px;
border-top:1px dashed var(--line);
}
.testi-avatar{
width:42px;height:42px;border-radius:50%;
background:linear-gradient(135deg, var(--maroon-deep), var(--maroon));
color:var(--gold-light);
display:grid;place-items:center;
font-family:var(--font-display);font-size:.92rem;font-weight:700;
letter-spacing:.04em;
flex-shrink:0;
}
.testi-author-text{display:flex;flex-direction:column;line-height:1.25;}
.testi-author strong{
font-family:var(--font-display);font-size:.92rem;font-weight:700;
color:var(--maroon-deep);
}
.testi-author span{
font-family:var(--font-body);font-size:.74rem;color:var(--muted);
letter-spacing:.03em;margin-top:2px;
}
.testi-dots{
display:flex;justify-content:center;gap:7px;margin-top:24px;
}
.testi-dot{
width:8px;height:8px;border-radius:50%;
background:var(--line);transition:background .25s, width .25s;cursor:pointer;
}
.testi-dot.active{background:var(--maroon);width:26px;border-radius:4px;}
@media (max-width:1024px){
.testi-card{flex-basis:calc((100% - 22px) / 2);} /* 2 visible */
}
@media (max-width:640px){
.testi-card{flex-basis:100%;}
.testi-track{gap:14px;}
.testi-card p{font-size:.92rem;}
}
/* =====================================================================
18. BRANDS CAROUSEL
===================================================================== */
.brands{background:var(--cream);position:relative;padding:60px 0;}
.brands-track{
display:grid;grid-template-columns:repeat(5,1fr);gap:30px;align-items:center;
padding:0 60px;
}
.brand-item{
text-align:center;padding:14px;
filter:grayscale(.4);opacity:.75;
transition:filter .25s, opacity .25s;
}
.brand-item:hover{filter:grayscale(0);opacity:1;}
.brand-item img{max-height:50px;width:auto;margin:0 auto;}
.brands-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:40px;height:40px;border-radius:50%;
background:#fff;color:var(--maroon);border:1px solid var(--line);
display:grid;place-items:center;cursor:pointer;font-size:.82rem;
box-shadow:var(--shadow-sm);
transition:background .25s, color .25s;
}
.brands-arrow:hover{background:var(--maroon);color:#fff;}
.brands-arrow-prev{left:16px;}
.brands-arrow-next{right:16px;}
@media (max-width:860px){
.brands-track{grid-template-columns:repeat(3,1fr);gap:18px;padding:0 50px;}
}
@media (max-width:560px){
.brands-track{grid-template-columns:repeat(2,1fr);}
}
/* =====================================================================
19. NEWSLETTER STRIP
===================================================================== */
.newsletter{
background:linear-gradient(120deg, var(--maroon-deep) 0%, var(--maroon) 100%);
color:#fff;padding:50px 0;
position:relative;overflow:hidden;
}
.newsletter::before{
content:"";position:absolute;left:0;top:0;width:340px;height:100%;
background:url("data:image/svg+xml;utf8,") no-repeat center/cover;
opacity:.4;pointer-events:none;
}
.newsletter-inner{
display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
position:relative;z-index:1;
}
.newsletter-text h3{
font-family:var(--font-display);font-size:1.55rem;font-weight:700;color:#fff;
letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px;
}
.newsletter-text h3 .em{color:var(--gold-light);}
.newsletter-text p{font-family:var(--font-body);font-size:.92rem;color:rgba(255,255,255,.78);margin:0;}
.newsletter-form{
display:flex;gap:10px;flex:1;max-width:480px;
background:#fff;border-radius:8px;padding:6px;
}
.newsletter-form input{
flex:1;border:0;padding:12px 16px;outline:none;background:transparent;
font-family:var(--font-body);font-size:.92rem;color:var(--ink);
}
.newsletter-form input::placeholder{color:var(--muted);}
.newsletter-form button{
background:var(--gold);color:#fff;border:0;border-radius:6px;
padding:11px 26px;font-family:var(--font-body);font-size:.78rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
transition:background .25s;
}
.newsletter-form button:hover{background:var(--gold-deep);}
@media (max-width:768px){
.newsletter-inner{flex-direction:column;align-items:flex-start;text-align:left;}
.newsletter-form{width:100%;max-width:none;}
}
/* =====================================================================
20. FOOTER
===================================================================== */
.footer{
background:var(--bg-dark);color:rgba(255,255,255,.7);
padding:64px 0 20px;
}
.footer h5{
color:#fff;font-family:var(--font-display);font-size:1rem;font-weight:700;
margin-bottom:18px;letter-spacing:.06em;text-transform:uppercase;
position:relative;padding-bottom:10px;
}
.footer h5::after{
content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--gold);
}
.footer a{color:rgba(255,255,255,.65);font-size:.85rem;transition:color .25s;}
.footer a:hover{color:var(--gold-light);}
.footer-grid{
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;
gap:36px;margin-bottom:36px;
}
.footer-brand img{height:60px;width:auto;margin-bottom:16px;}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.7;margin-bottom:16px;max-width:280px;}
.footer-social{display:flex;gap:9px;}
.footer-social a{
width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.08);color:#fff;
display:grid;place-items:center;font-size:.92rem;
transition:background .25s;
}
.footer-social a:hover{background:var(--maroon);}
.footer-links li,.footer-contact li{margin-bottom:10px;font-size:.85rem;}
.footer-contact li{display:flex;align-items:flex-start;gap:10px;}
.footer-contact li i{color:var(--gold);margin-top:3px;font-size:.82rem;flex-shrink:0;}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.08);
padding-top:20px;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
font-size:.78rem;color:rgba(255,255,255,.45);
}
@media (max-width:1024px){
.footer-grid{grid-template-columns:1fr 1fr;gap:30px;}
.footer-brand{grid-column:span 2;}
}
@media (max-width:560px){
.footer-grid{grid-template-columns:1fr 1fr;gap:24px 18px;}
.footer-brand{grid-column:span 2;}
}
/* =====================================================================
21. FAB (floating WA + Call)
===================================================================== */
.fab-stack{
position:fixed;right:18px;bottom:18px;z-index:90;
display:flex;flex-direction:column;gap:12px;
}
.fab{
width:52px;height:52px;border-radius:50%;
display:grid;place-items:center;color:#fff;font-size:1.3rem;
cursor:pointer;border:0;
box-shadow:0 14px 28px -10px rgba(107,14,31,.4);
transition:transform .25s, box-shadow .3s;
}
.fab:hover{transform:translateY(-3px) scale(1.05);}
.fab.wa{background:var(--whatsapp);box-shadow:0 14px 28px -10px rgba(37,211,102,.45);}
.fab.call{background:var(--maroon);}
/* =====================================================================
22. MODAL (basic — to expand in Day 4)
===================================================================== */
.modal-overlay{
position:fixed;inset:0;background:rgba(42,8,16,.55);
backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;padding:20px;
opacity:0;visibility:hidden;transition:.3s;z-index:1000;
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal{
background:#fff;border-radius:14px;width:min(540px, 100%);max-height:92vh;overflow:hidden;
position:relative;transform:translateY(20px) scale(.95);opacity:0;
transition:transform .35s cubic-bezier(.3,1.3,.6,1), opacity .3s;
}
.modal-overlay.open .modal{transform:none;opacity:1;}
.modal-close{
position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
background:var(--cream);color:var(--maroon);
display:grid;place-items:center;font-size:.85rem;z-index:2;transition:.25s;
}
.modal-close:hover{background:var(--maroon);color:#fff;transform:rotate(90deg);}
/* ===== ENHANCED ENQUIRY MODAL — 2-column with visual panel ===== */
.modal.enq-modal{
width:min(880px, 100%);
max-height:92vh;
display:grid;grid-template-columns:42% 58%;
overflow:hidden;
box-shadow:0 30px 80px -20px rgba(107,14,31,.45);
}
.modal.enq-modal .modal-close{
background:rgba(255,255,255,.92);color:var(--maroon);
box-shadow:0 2px 8px rgba(0,0,0,.15);
}
/* LEFT visual */
.enq-visual{
position:relative;
background:var(--maroon-deep);
overflow:hidden;color:#fff;
display:flex;flex-direction:column;justify-content:flex-end;
padding:30px 26px;min-height:520px;
}
.enq-visual img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;z-index:0;
}
.enq-visual-overlay{
position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg, rgba(42,8,16,.45) 0%, rgba(42,8,16,.85) 55%, rgba(42,8,16,.95) 100%);
}
.enq-visual-body{position:relative;z-index:2;}
.enq-visual-tag{
display:inline-block;
font-family:var(--font-body);font-size:.68rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
background:rgba(188,143,77,.25);color:var(--gold);
padding:6px 12px;border-radius:20px;
border:1px solid rgba(188,143,77,.5);
margin-bottom:14px;
}
.enq-visual h4{
font-family:var(--font-display);font-weight:700;
font-size:1.55rem;line-height:1.25;color:#fff;
margin-bottom:10px;
}
.enq-visual p{
font-family:var(--font-body);font-size:.85rem;line-height:1.6;
color:rgba(255,255,255,.85);margin-bottom:18px;
}
.enq-visual-pts{
list-style:none;padding:0;margin:0 0 22px;
display:flex;flex-direction:column;gap:8px;
}
.enq-visual-pts li{
font-family:var(--font-body);font-size:.8rem;color:rgba(255,255,255,.9);
display:flex;align-items:center;gap:9px;
}
.enq-visual-pts li i{color:var(--gold);font-size:.85rem;}
.enq-visual-foot{
display:flex;justify-content:space-between;gap:8px;
padding-top:18px;border-top:1px solid rgba(188,143,77,.3);
}
.enq-visual-foot span{
display:flex;flex-direction:column;align-items:center;
font-family:var(--font-body);font-size:.62rem;
color:rgba(255,255,255,.7);letter-spacing:.08em;text-transform:uppercase;
text-align:center;flex:1;
}
.enq-visual-foot strong{
font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--gold);
margin-bottom:2px;
}
/* RIGHT form side */
.enq-side{overflow-y:auto;background:#fff;}
.enq-form-pad{padding:34px 30px;}
.enq-h3{
font-family:var(--font-display);font-size:1.5rem;font-weight:700;
color:var(--maroon-deep);text-align:center;margin-bottom:6px;
}
.enq-sub{
text-align:center;color:var(--muted);font-size:.88rem;
font-family:var(--font-body);margin-bottom:22px;
}
.enq-sub strong{color:var(--maroon);}
.enq-form{display:flex;flex-direction:column;}
.enq-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.enq-input{
width:100%;padding:11px 14px;
border:1px solid var(--line);border-radius:8px;
font-family:var(--font-body);font-size:.9rem;color:var(--ink);
margin-bottom:10px;transition:border-color .2s, box-shadow .2s;
background:#fff;
}
.enq-row-2 .enq-input{margin-bottom:0;}
.enq-input:focus{
outline:none;border-color:var(--maroon);
box-shadow:0 0 0 3px rgba(107,14,31,.08);
}
.enq-textarea{min-height:78px;resize:vertical;margin-bottom:14px;}
.enq-submit{width:100%;margin-top:4px;}
.enq-foot-note{
display:block;text-align:center;margin-top:12px;
font-family:var(--font-body);font-size:.72rem;color:var(--muted);
}
.enq-foot-note i{color:var(--gold);margin-right:4px;}
.enq-success{padding:60px 32px;text-align:center;}
.enq-success-ic{
width:64px;height:64px;border-radius:50%;
background:linear-gradient(135deg,#1ebe57,#25D366);color:#fff;
display:grid;place-items:center;font-size:1.8rem;
margin:0 auto 16px;
box-shadow:0 10px 24px -8px rgba(30,190,87,.5);
}
@media (max-width:760px){
.modal.enq-modal{grid-template-columns:1fr;max-height:96vh;}
.enq-visual{display:none;}
.enq-form-pad{padding:30px 22px 24px;}
}
/* =====================================================================
23. REVEAL ON SCROLL
===================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s, transform .8s;}
.reveal.in{opacity:1;transform:none;}
/* =====================================================================
24. UTILITIES
===================================================================== */
.text-center{text-align:center;}
.text-maroon{color:var(--maroon);}
.text-gold{color:var(--gold);}
.text-muted{color:var(--muted);}
.bg-cream{background:var(--cream);}
.italic{font-style:italic;}
.script{font-family:var(--font-script);}
.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:1.5rem;}
.mb-4{margin-bottom:2rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:1.5rem;}
.flex{display:flex;}
.flex-wrap{flex-wrap:wrap;}
.gap-2{gap:1rem;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.text-uppercase{text-transform:uppercase;letter-spacing:.06em;}
/* =====================================================================
25. ABOUT US PAGE — abt-* classes
===================================================================== */
/* Shared eyebrow */
.abt-eyebrow{
display:inline-flex;align-items:center;gap:14px;
font-family:var(--font-body);font-size:.74rem;font-weight:700;
letter-spacing:.4em;text-transform:uppercase;color:var(--maroon);
margin-bottom:14px;
}
.abt-eyebrow::before,.abt-eyebrow::after{
content:"";width:32px;height:1px;background:var(--gold);display:inline-block;
}
.abt-eyebrow-light{color:var(--gold-light);}
.abt-eyebrow-light::before,.abt-eyebrow-light::after{background:var(--gold);}
/* Buttons */
.abt-btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:14px 26px;border-radius:6px;
font-family:var(--font-body);font-size:.78rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
background:transparent;color:var(--maroon-deep);
border:1.5px solid var(--gold);
text-decoration:none;cursor:pointer;
box-shadow:none;
transition:transform .25s, background .25s, color .25s, border-color .25s, box-shadow .3s;
}
.abt-btn:hover{
background:var(--maroon);color:#fff;
border-color:var(--maroon);
transform:translateY(-2px);
box-shadow:0 16px 32px -10px rgba(107,14,31,.5);
}
.abt-btn-gold{background:var(--gold);color:#fff;border-color:var(--gold);}
.abt-btn-gold:hover{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep);}
.abt-btn i{font-size:.85rem;}
/* Common section head wrapper */
.abt-section-head{text-align:center;margin:0 auto 40px;max-width:680px;}
/* ============ 1. HERO ============ */
.abt-hero{
position:relative;
background:linear-gradient(135deg, var(--cream) 0%, #fdf2da 50%, var(--cream) 100%);
padding:60px 0 50px;
overflow:hidden;
}
.abt-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.abt-hero-content h1{
font-family:var(--font-display);
font-size:clamp(2rem,4vw,3.2rem);font-weight:700;
color:var(--maroon-deep);line-height:1.1;margin-bottom:18px;
}
.abt-script{
display:block;
font-family:var(--font-display);
font-style:italic;
font-weight:500;
color:var(--gold-deep);
font-size:.9em;
line-height:1.1;
margin-top:8px;
letter-spacing:.01em;
}
.abt-hero-tagline{
font-family:var(--font-display);font-style:italic;
font-size:1.05rem;color:var(--maroon);line-height:1.5;margin-bottom:8px;
max-width:380px;
}
.abt-hero-sub{
font-family:var(--font-body);font-size:.9rem;color:var(--body);
margin-bottom:24px;
}
.abt-hero-img{
position:relative;
}
.abt-hero-img img{
width:100%;height:auto;display:block;
}
.abt-corner{position:absolute;width:60px;height:60px;pointer-events:none;opacity:.5;}
.abt-corner-tl{top:18px;left:18px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);}
.abt-corner-tr{top:18px;right:18px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);}
.abt-corner-bl{bottom:18px;left:18px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);}
.abt-corner-br{bottom:18px;right:18px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);}
@media (max-width:860px){
.abt-hero{padding:40px 0 30px;}
.abt-hero-grid{grid-template-columns:1fr;gap:24px;}
.abt-corner{width:36px;height:36px;}
}
/* ============ 2. OUR STORY ============ */
.abt-story{
padding:90px 0;background:var(--cream);
position:relative;overflow:hidden;
}
/* Artisan sketch as subtle right-side background */
.abt-story::after{
content:"";position:absolute;top:0;right:0;bottom:0;
width:35%;
background:url("../public/story-image-right.png") right center/contain no-repeat;
opacity:.5;
pointer-events:none;
/* Fade from full opacity on right to transparent on left edge */
mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
}
.abt-story .container{position:relative;z-index:1;}
.abt-story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
.abt-story-img{position:relative;}
.abt-story-img img{
width:100%;height:auto;display:block;
border-radius:6px;
}
.abt-story-content{position:relative;padding-right:20px;}
.abt-story-content h2{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.9rem,3vw,2.6rem);color:var(--maroon-deep);
line-height:1.2;margin-bottom:10px;
text-align:center;
}
.abt-story-content p{
font-family:var(--font-body);font-size:1rem;line-height:1.75;color:var(--body);
margin:0 auto;max-width:500px;text-align:center;
}
/* Eyebrow — gold lines flanking "OUR STORY" */
.abt-story-eyebrow{
display:flex;align-items:center;justify-content:center;gap:14px;
margin-bottom:14px;
}
.abt-eb-line{
flex:0 0 auto;width:60px;height:1px;background:var(--gold);
}
.abt-eb-text{
font-family:var(--font-body);font-size:.78rem;font-weight:700;
letter-spacing:.36em;text-transform:uppercase;color:var(--maroon);
}
/* Ornamental flourish (diamond between gold lines) */
.abt-story-flourish{
display:flex;align-items:center;justify-content:center;gap:10px;
margin:14px auto 22px;
max-width:280px;
}
.abt-story-flourish .abt-eb-line{
flex:1;width:auto;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.abt-flourish-ic{
color:var(--gold);font-size:.5rem;
transform:rotate(45deg);
}
/* Divider between paragraphs */
.abt-story-divider{
display:block;width:34px;height:1px;
background:var(--gold);
margin:20px auto;
}
@media (max-width:860px){
.abt-story{padding:50px 0;}
.abt-story::after{display:none;}
.abt-story-grid{grid-template-columns:1fr;gap:30px;}
.abt-story-content{padding-right:0;}
.abt-eb-line{width:40px;}
}
/* ============ 3. OUR JOURNEY (TIMELINE) ============ */
.abt-journey{padding:60px 0;background:var(--cream-2);}
.abt-timeline{
display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
position:relative;margin-top:24px;
}
.abt-timeline::before{
content:"";position:absolute;top:32px;left:10%;right:10%;height:1px;
background:repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px);
}
.abt-milestone{text-align:center;position:relative;z-index:1;padding:0 6px;}
.abt-milestone-ic{
width:64px;height:64px;border-radius:50%;
background:var(--maroon);color:var(--gold-light);
display:grid;place-items:center;font-size:1.5rem;
margin:0 auto 16px;
border:2px solid var(--gold);
box-shadow:0 8px 18px -8px rgba(107,14,31,.4);
transition:transform .3s;
}
.abt-milestone:hover .abt-milestone-ic{transform:translateY(-4px) scale(1.05);}
.abt-milestone strong{
display:block;
font-family:var(--font-display);font-weight:700;font-size:1.3rem;
color:var(--maroon-deep);line-height:1;margin-bottom:4px;
}
.abt-milestone h5{
font-family:var(--font-display);font-weight:700;
font-size:.92rem;color:var(--ink);
letter-spacing:.04em;margin:0 0 6px;
}
.abt-milestone span{
font-family:var(--font-body);font-size:.74rem;color:var(--muted);
line-height:1.45;display:block;
}
@media (max-width:1024px){
.abt-timeline{grid-template-columns:repeat(3,1fr);gap:30px 14px;}
.abt-timeline::before{display:none;}
}
@media (max-width:560px){
.abt-timeline{grid-template-columns:repeat(2,1fr);}
/* Last milestone (2025) alone in row → span full width + center */
.abt-timeline .abt-milestone:last-child{
grid-column:1 / -1;
justify-self:center;
max-width:240px;
}
}
/* ============ 4. OUR LEGACY ============ */
.abt-legacy{padding:80px 0;background:var(--cream);}
.abt-legacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.abt-legacy-img img{width:100%;height:auto;display:block;mix-blend-mode:multiply;}
.abt-legacy-content h2{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.7rem,2.8vw,2.2rem);color:var(--maroon-deep);
line-height:1.2;margin-bottom:18px;
}
.abt-legacy-content p{
font-family:var(--font-body);font-size:.98rem;line-height:1.75;color:var(--body);
margin-bottom:14px;max-width:460px;
}
@media (max-width:860px){
.abt-legacy{padding:50px 0;}
.abt-legacy-grid{grid-template-columns:1fr;gap:30px;}
}
/* ============ 5. MANUFACTURING EXCELLENCE ============ */
.abt-mfg{background:var(--cream);}
.abt-mfg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.abt-mfg-card{
text-align:center;padding:24px 18px;
background:#fff;border:1px solid var(--line);border-radius:12px;
transition:transform .3s, box-shadow .3s, border-color .3s;
}
.abt-mfg-card:hover{
transform:translateY(-4px);
border-color:var(--gold);
box-shadow:0 18px 32px -16px rgba(107,14,31,.22);
}
.abt-mfg-ic{
width:64px;height:64px;border-radius:50%;
background:var(--cream-2);color:var(--maroon);
display:grid;place-items:center;font-size:1.5rem;
margin:0 auto 14px;border:1px solid rgba(188,143,77,.4);
}
.abt-mfg-card h5{
font-family:var(--font-body);font-size:.74rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
margin-bottom:4px;
}
.abt-mfg-card strong{
display:block;
font-family:var(--font-display);font-weight:700;
font-size:1.08rem;color:var(--maroon-deep);
margin-bottom:8px;line-height:1.3;
}
.abt-mfg-card p{
font-family:var(--font-body);font-size:.82rem;color:var(--muted);line-height:1.55;
margin:0;
}
@media (max-width:1024px){.abt-mfg-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.abt-mfg-grid{grid-template-columns:1fr;gap:16px;}}
/* ============ 6. OUR NUMBERS SPEAK ============ */
.abt-numbers{padding:80px 0;background:var(--cream-2);}
.abt-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.abt-stat{
text-align:center;
padding:24px 14px;
}
.abt-stat-ic{
width:54px;height:54px;border-radius:50%;
background:var(--maroon);color:var(--gold-light);
display:grid;place-items:center;font-size:1.2rem;
margin:0 auto 14px;
border:2px solid var(--gold);
}
.abt-stat strong{
display:block;
font-family:var(--font-display);font-weight:700;
font-size:1.85rem;color:var(--maroon-deep);
line-height:1;margin-bottom:6px;
}
.abt-stat span{
font-family:var(--font-body);font-size:.78rem;color:var(--body);
letter-spacing:.03em;
}
@media (max-width:1024px){.abt-stats-grid{grid-template-columns:repeat(3,1fr);gap:24px 14px;}}
@media (max-width:560px){
.abt-stats-grid{grid-template-columns:repeat(2,1fr);}
/* Last stat (Millions Of Bangles Produced) alone in row → span full + center */
.abt-stats-grid .abt-stat:last-child{
grid-column:1 / -1;
justify-self:center;
max-width:260px;
}
}
/* ============ 7. WHY BRANDS TRUST US ============ */
.abt-trust{
background:linear-gradient(180deg, #5C0813 0%, #6B0E1F 50%, #5C0813 100%);
color:#fff;
padding:60px 0;position:relative;overflow:hidden;
}
.abt-trust::before{
content:"";position:absolute;inset:0;
background-image:url("data:image/svg+xml;utf8,");
background-size:80px 80px;opacity:.4;pointer-events:none;
}
.abt-trust .container{position:relative;z-index:1;}
.abt-trust-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.abt-trust-card{
text-align:center;padding:14px 8px;
transition:transform .3s;
}
.abt-trust-card:hover{transform:translateY(-4px);}
.abt-trust-ic{
width:64px;height:64px;border-radius:50%;
background:rgba(255,255,255,.06);color:var(--gold-light);
border:1px solid rgba(188,143,77,.5);
display:grid;place-items:center;font-size:1.5rem;
margin:0 auto 14px;
transition:background .3s, color .3s, border-color .3s;
}
.abt-trust-card:hover .abt-trust-ic{
background:var(--gold);color:var(--maroon-deep);border-color:var(--gold);
}
.abt-trust-card h5{
font-family:var(--font-body);font-size:.82rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light);line-height:1.4;
}
@media (max-width:1024px){.abt-trust-grid{grid-template-columns:repeat(3,1fr);gap:26px 14px;}}
@media (max-width:560px){.abt-trust-grid{grid-template-columns:repeat(2,1fr);}}
/* ============ 8. GLOBAL PRESENCE ============ */
.abt-global{
padding:90px 0;background:#f9f2e4;
position:relative;overflow:hidden;
}
/* Decorative bangles + palace silhouette as bottom-left background */
.abt-global::before{
content:"";position:absolute;bottom:0;left:0;
width:35%;height:70%;
background:url("../public/map-left-bg.png") bottom left/contain no-repeat;
opacity:.65;
pointer-events:none;
mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}
.abt-global .container{position:relative;z-index:1;}
.abt-global-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;}
/* LEFT — Badge + Eyebrow + heading + flourishes + 2-col country pills */
.abt-global-text{text-align:center;padding-right:10px;position:relative;z-index:2;}
/* "100+ Countries Served" mini badge */
.abt-global-badge{
display:inline-flex;align-items:center;gap:8px;
background:rgba(188,143,77,.12);
border:1px solid rgba(188,143,77,.4);
border-radius:100px;
padding:6px 14px 6px 12px;
margin-bottom:18px;
font-family:var(--font-body);font-size:.78rem;
color:var(--maroon-deep);
backdrop-filter:blur(4px);
}
.abt-global-badge i{
color:var(--gold-deep);font-size:.85rem;
}
.abt-global-badge strong{
font-family:var(--font-display);font-weight:700;
color:var(--maroon);margin-right:2px;font-size:.95rem;
}
.abt-global-eyebrow{
display:flex;align-items:center;justify-content:center;gap:14px;
margin-bottom:14px;
}
.abt-global-text h2{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--maroon-deep);
line-height:1.2;margin:0;
}
/* Country pills — soft gold-bordered cards */
.abt-global-markets{
list-style:none;padding:0;margin:8px 0 0;
display:grid;grid-template-columns:1fr 1fr;
gap:10px 14px;max-width:520px;
margin-left:auto;margin-right:auto;
}
.abt-global-markets li{
display:flex;align-items:center;gap:11px;
background:rgba(255,255,255,.6);
border:1px solid rgba(188,143,77,.32);
border-radius:8px;
padding:11px 16px;
font-family:var(--font-body);font-size:.95rem;font-weight:600;color:var(--ink);
text-align:left;
position:relative;overflow:hidden;
transition:transform .3s, border-color .3s, background .3s, box-shadow .3s;
cursor:default;
}
.abt-global-markets li::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--gold);
transform:scaleY(0);transform-origin:center;
transition:transform .35s cubic-bezier(.4,1,.6,1);
}
.abt-global-markets li:hover{
transform:translateX(4px);
border-color:var(--gold);
background:rgba(255,255,255,.85);
box-shadow:0 8px 18px -10px rgba(107,14,31,.18);
}
.abt-global-markets li:hover::before{transform:scaleY(1);}
.abt-global-markets li i{
width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;
background:rgba(107,14,31,.08);
color:var(--maroon);font-size:.78rem;
flex-shrink:0;
transition:background .3s, color .3s;
}
.abt-global-markets li:hover i{
background:var(--maroon);color:var(--gold-light);
}
.abt-global-markets li span{flex:1;}
/* RIGHT — Map image (clean, no filter, no hover) */
.abt-global-map{
position:relative;
}
.abt-global-map img{
width:100%;height:auto;display:block;
}
@media (max-width:860px){
.abt-global{padding:50px 0;}
.abt-global::before{display:none;}
.abt-global-grid{grid-template-columns:1fr;gap:30px;}
.abt-global-text{padding-right:0;}
.abt-global-markets{max-width:none;}
}
@media (max-width:560px){
.abt-global-markets{grid-template-columns:1fr;gap:10px;}
}
/* ============ 9. FOUR GENERATIONS ============ */
.abt-gens{padding:80px 0;background:var(--cream);}
.abt-gens-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;}
.abt-gens-left h2{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.7rem,2.8vw,2.3rem);color:var(--maroon-deep);
line-height:1.2;margin-bottom:14px;
}
.abt-gens-line{
display:block;width:50px;height:3px;
background:linear-gradient(90deg, var(--maroon), var(--gold));
border-radius:2px;margin-bottom:22px;
}
.abt-gens-left p{
font-family:var(--font-body);font-size:.96rem;line-height:1.7;color:var(--body);
margin-bottom:12px;max-width:380px;
}
.abt-gens-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.abt-gen-card{
text-align:center;
background:linear-gradient(135deg, #F5E8D2 0%, #EFDCC2 100%);
border:1px solid rgba(188,143,77,.35);
border-radius:10px;
padding:20px 12px;
transition:transform .35s, box-shadow .35s;
position:relative;overflow:hidden;
}
.abt-gen-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 32px -16px rgba(107,14,31,.28);
}
.abt-gen-photo{
width:90px;height:90px;border-radius:50%;
background:linear-gradient(135deg, var(--maroon-deep), var(--maroon));
color:var(--gold-light);
display:grid;place-items:center;font-size:2.2rem;
margin:0 auto 14px;
filter:sepia(.2);
border:2px solid var(--gold);
}
.abt-gen-card strong{
display:block;
font-family:var(--font-display);font-weight:700;
font-size:.95rem;color:var(--maroon-deep);
letter-spacing:.04em;margin-bottom:4px;
}
.abt-gen-card strong sup{font-size:.65em;color:var(--gold-deep);font-weight:600;}
.abt-gen-year{
display:block;
font-family:var(--font-display);font-style:italic;
font-size:.95rem;color:var(--gold-deep);
margin-bottom:6px;
}
.abt-gen-card em{
display:block;
font-family:var(--font-body);font-style:normal;font-size:.74rem;
color:var(--body);letter-spacing:.03em;
}
@media (max-width:1024px){
.abt-gens-grid{grid-template-columns:1fr;gap:36px;}
.abt-gens-cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){.abt-gens-cards{grid-template-columns:1fr;}}
/* ============ 10. CERTIFIED QUALITY ============ */
.abt-cert{padding:80px 0;background:var(--cream-2);}
.abt-cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.abt-cert-card{
text-align:center;padding:24px 18px;
border-right:1px dashed rgba(188,143,77,.4);
}
.abt-cert-card:last-child{border-right:0;}
.abt-cert-ic{
width:60px;height:60px;border-radius:50%;
background:rgba(188,143,77,.18);
color:var(--maroon-deep);
display:grid;place-items:center;font-size:1.3rem;
margin:0 auto 14px;
border:1px solid var(--gold);
}
.abt-cert-card h5{
font-family:var(--font-body);font-size:.78rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--maroon-deep);
margin-bottom:8px;
}
.abt-cert-card p{
font-family:var(--font-body);font-size:.82rem;color:var(--body);line-height:1.55;
margin:0;
}
@media (max-width:1024px){
.abt-cert-grid{grid-template-columns:repeat(2,1fr);}
.abt-cert-card{border-right:0;border-bottom:1px dashed rgba(188,143,77,.4);padding-bottom:22px;}
.abt-cert-card:nth-child(2n){border-right:0;}
.abt-cert-card:nth-last-child(-n+2){border-bottom:0;}
}
@media (max-width:560px){
.abt-cert-grid{grid-template-columns:1fr;}
.abt-cert-card{border-right:0;border-bottom:1px dashed rgba(188,143,77,.4);}
.abt-cert-card:last-child{border-bottom:0;}
}
/* ============ 11. CTA BANNER ============ */
.abt-cta{
background:linear-gradient(135deg, var(--maroon-deep) 0%, var(--maroon) 50%, var(--maroon-deep) 100%);
padding:70px 0;
position:relative;overflow:hidden;
}
.abt-cta::before,.abt-cta::after{
content:"";position:absolute;width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle, rgba(188,143,77,.25), transparent 70%);
filter:blur(40px);pointer-events:none;
}
.abt-cta::before{top:-100px;left:-80px;}
.abt-cta::after{bottom:-100px;right:-80px;}
.abt-cta-inner{text-align:center;color:#fff;position:relative;z-index:1;}
.abt-cta h2{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.7rem,3vw,2.5rem);color:#fff;
line-height:1.2;margin-bottom:12px;
}
.abt-cta h2 em{
font-style:italic;color:var(--gold-light);font-weight:500;
}
.abt-cta p{
font-family:var(--font-display);font-style:italic;font-size:1rem;
color:rgba(255,255,255,.78);margin-bottom:26px;
}
@media (max-width:560px){.abt-cta{padding:50px 0;}}
/* =====================================================================
26. PRODUCT DETAIL PAGE — pdt-* classes
===================================================================== */
/* Breadcrumb bar — all items uniform color + size */
.pdt-crumb-bar{background:var(--cream);padding:18px 0;border-bottom:1px solid var(--line);}
.pdt-crumb{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
font-family:var(--font-body);font-size:.82rem;font-weight:500;color:var(--maroon);
}
.pdt-crumb a,
.pdt-crumb span{
color:var(--maroon);font-size:.82rem;font-weight:500;text-decoration:none;
display:inline-flex;align-items:center;gap:6px;
transition:color .25s;
}
.pdt-crumb a:hover{color:var(--maroon-deep);}
.pdt-crumb a i,
.pdt-crumb-sep{font-size:.82rem;color:var(--maroon);}
/* ============ PRODUCT HERO (2-col) ============ */
.pdt-hero{padding:40px 0 0;background:var(--cream);}
.pdt-hero-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:15px;align-items:start;}
/* GALLERY */
.pdt-gallery{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:start;}
/* When product has only 1 image — hide thumbs, main spans full column */
.pdt-gallery.is-single{grid-template-columns:1fr;}
.pdt-gallery.is-single .pdt-thumbs-wrap,
.pdt-gallery.is-single .pdt-thumbs{display:none;}
/* Thumbs wrapper — up button + scrollable thumbs + down button */
.pdt-thumbs-wrap{display:flex;flex-direction:column;gap:6px;align-items:center;}
.pdt-thumbs-nav{
width:84px;height:26px;
background:#fff;border:1.5px solid var(--line);border-radius:6px;
color:var(--maroon);cursor:pointer;font-size:.85rem;
display:flex;align-items:center;justify-content:center;
transition:background .2s, color .2s, border-color .2s;
padding:0;
}
.pdt-thumbs-nav:hover{background:var(--maroon);color:#fff;border-color:var(--maroon);}
.pdt-thumbs-nav[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none;}
.pdt-thumbs{
display:flex;flex-direction:column;gap:10px;
max-height:440px;overflow-y:auto;
scrollbar-width:none;
}
.pdt-thumbs::-webkit-scrollbar{display:none;width:0;height:0;}
.pdt-thumb{
width:84px;height:84px;flex-shrink:0;border-radius:8px;overflow:hidden;
background:#fff;border:1.5px solid var(--line);
padding:0;cursor:pointer;transition:border-color .25s, transform .25s;
}
.pdt-thumb:hover{border-color:var(--gold);}
.pdt-thumb.active{border-color:var(--maroon);transform:scale(1.02);}
.pdt-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pdt-main{
position:relative;
background:#fff;border:1px solid var(--line);border-radius:14px;
overflow:hidden;aspect-ratio:1/1;
box-shadow:0 14px 30px -16px rgba(107,14,31,.18);
}
.pdt-main img{
width:100%;height:100%;object-fit:cover;display:block;
}
.pdt-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:42px;height:42px;border-radius:50%;
background:rgba(255,255,255,.92);color:var(--maroon);border:1px solid var(--line);
display:grid;place-items:center;cursor:pointer;font-size:.85rem;
box-shadow:0 4px 12px -4px rgba(107,14,31,.2);
transition:background .25s, color .25s, transform .25s;z-index:3;
}
.pdt-arrow:hover{background:var(--maroon);color:#fff;}
.pdt-arrow-prev{left:14px;}
.pdt-arrow-next{right:14px;}
/* INFO */
.pdt-info{padding-left:8px;}
.pdt-name{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.8rem,3vw,2.4rem);
color:var(--maroon-deep);line-height:1.15;
margin:0 0 8px;
}
.pdt-sku{
font-family:var(--font-body);font-size:.82rem;color:var(--muted);
letter-spacing:.06em;margin-bottom:18px;
}
.pdt-sku strong{color:var(--ink);font-weight:700;letter-spacing:.04em;}
.pdt-desc{
font-family:var(--font-body);font-size:.8rem;line-height:1.7;
color:var(--body);margin-bottom:24px;
}
/* Feature highlight image (replaces icon pill rows) */
.pdt-feat-img{
margin-bottom:5px;
padding:0 50px;
}
/* Second .pdt-feat-img (after bulk CTA) — no padding */
.pdt-bulk + .pdt-feat-img{
padding:0;
}
.pdt-feat-img img{
width:100%;height:auto;display:block;
}
/* Bulk order CTA card */
.pdt-bulk{
display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
background:#fff;border:1px solid rgba(188,143,77,.4);border-radius:12px;
padding:18px 22px;margin-bottom:10px;
}
.pdt-bulk-ic{
width:48px;height:48px;border-radius:50%;
background:var(--maroon);color:var(--gold-light);
display:grid;place-items:center;font-size:1.15rem;
flex-shrink:0;
}
.pdt-bulk-text strong{
display:block;
font-family:var(--font-display);font-weight:700;
font-size:1.05rem;color:var(--maroon-deep);
margin-bottom:3px;
}
.pdt-bulk-text span{
font-family:var(--font-body);font-size:.85rem;color:var(--body);
}
.pdt-bulk-actions{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.pdt-bulk-btn{
background:var(--maroon);color:#fff;border:0;
padding:12px 22px;border-radius:6px;
font-family:var(--font-body);font-size:.78rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
transition:background .25s, transform .25s;
box-shadow:none;
}
.pdt-bulk-btn:hover{
background:var(--maroon-deep);
transform:translateY(-2px);
box-shadow:none;
}
.pdt-bulk-actions small{
font-family:var(--font-body);font-size:.7rem;color:var(--muted);
}
@media (max-width:1024px){
.pdt-hero-grid{grid-template-columns:1fr;gap:30px;}
}
@media (max-width:640px){
.pdt-gallery{grid-template-columns:1fr;}
.pdt-thumbs{flex-direction:row;overflow-x:auto;}
.pdt-thumb{width:64px;height:64px;flex-shrink:0;}
.pdt-bulk{grid-template-columns:1fr;text-align:center;}
.pdt-bulk-ic{margin:0 auto;}
.pdt-bulk-actions{align-items:center;}
}
/* ============ TABS + RELATED (2-col) ============ */
.pdt-content-sec{padding:15px;background:var(--cream);}
.pdt-content-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:15px;align-items:stretch;}
.pdt-content-grid > .pdt-tabs-card,
.pdt-content-grid > .pdt-related{display:flex;flex-direction:column;}
.pdt-content-grid > .pdt-related .pdt-related-track{flex:1;align-items:center;}
.pdt-tabs-card{
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:24px 26px;
}
.pdt-tabs{
display:flex;gap:24px;
border-bottom:1px solid var(--line);margin-bottom:20px;
}
.pdt-tab{
background:transparent;border:0;padding:12px 0;
font-family:var(--font-body);font-size:.85rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);cursor:pointer;
position:relative;transition:color .25s;
}
.pdt-tab::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
background:var(--maroon);transform:scaleX(0);transform-origin:left;
transition:transform .3s;
}
.pdt-tab.active{color:var(--maroon-deep);}
.pdt-tab.active::after{transform:scaleX(1);}
.pdt-tab-content{display:none;animation:pdtFade .3s ease;}
.pdt-tab-content.active{display:block;}
@keyframes pdtFade{from{opacity:0;}to{opacity:1;}}
.pdt-tab-content p{
font-family:var(--font-body);font-size:.92rem;line-height:1.75;
color:var(--body);margin:0 0 16px;
}
.pdt-feat-list{
list-style:none;padding:0;margin:0;
display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;
}
.pdt-feat-list li{
display:flex;align-items:flex-start;gap:8px;
font-family:var(--font-body);font-size:.86rem;color:var(--body);
}
.pdt-feat-list li i{color:var(--gold-deep);font-size:.82rem;margin-top:3px;flex-shrink:0;}
.pdt-spec-table{
width:100%;border-collapse:collapse;
font-family:var(--font-body);font-size:.88rem;
}
.pdt-spec-table th,.pdt-spec-table td{
text-align:left;padding:10px 12px;
border-bottom:1px dashed var(--line);
}
.pdt-spec-table th{
width:38%;color:var(--maroon-deep);font-weight:700;
}
.pdt-spec-table td{color:var(--body);}
/* RELATED */
.pdt-related{
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:24px 22px;
overflow:hidden;
}
.pdt-related-head{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:18px;
}
.pdt-related-head h3{
font-family:var(--font-body);font-size:.85rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--maroon-deep);
margin:0;
}
.pdt-related-arrows{display:flex;gap:6px;}
.pdt-related-arrow{
width:32px;height:32px;border-radius:50%;
background:#fff;color:var(--maroon);border:1px solid var(--line);
display:grid;place-items:center;cursor:pointer;font-size:.72rem;
transition:background .25s, color .25s;
}
.pdt-related-arrow:hover{background:var(--maroon);color:#fff;}
.pdt-related-track{
display:flex;gap:14px;overflow-x:auto;
scrollbar-width:none;
padding:4px;
}
.pdt-related-track::-webkit-scrollbar{display:none;}
.pdt-rel-card{
flex:0 0 calc((100% - 28px) / 3); /* 3 visible */
background:#fff;border:1px solid var(--line);border-radius:8px;
overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;
display:flex;flex-direction:column;
transition:transform .3s, box-shadow .3s, border-color .3s;
}
.pdt-rel-card:hover{
transform:translateY(-3px);
border-color:var(--gold);
box-shadow:0 12px 26px -16px rgba(107,14,31,.2);
}
.pdt-rel-img{aspect-ratio:1/1;overflow:hidden;background:var(--cream);}
.pdt-rel-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.pdt-rel-card:hover .pdt-rel-img img{transform:scale(1.06);}
.pdt-rel-body{padding:11px 12px 13px;text-align:center;display:flex;flex-direction:column;gap:3px;}
.pdt-rel-body strong{
font-family:var(--font-display);font-size:.82rem;font-weight:700;
color:var(--maroon-deep);line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:2.1em;
}
.pdt-rel-body small{font-family:var(--font-body);font-size:.64rem;color:var(--muted);}
.pdt-rel-btn{
display:inline-block;margin-top:6px;
font-family:var(--font-body);font-size:.62rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);
padding:6px 0;border:1px solid var(--maroon);border-radius:5px;
transition:background .25s, color .25s;
}
.pdt-rel-card:hover .pdt-rel-btn{background:var(--maroon);color:#fff;}
@media (max-width:1024px){
.pdt-content-grid{grid-template-columns:1fr;gap:24px;}
.pdt-rel-card{flex-basis:calc((100% - 14px) / 2);}
}
@media (max-width:560px){
.pdt-tabs-card{padding:18px;}
.pdt-feat-list{grid-template-columns:1fr;}
.pdt-rel-card{flex-basis:75%;}
}
/* ============ BOTTOM TRUST PILLARS ============ */
.pdt-pillars{
background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:22px 0;
}
.pdt-pillars-grid{
display:grid;grid-template-columns:repeat(5,1fr);gap:0;
}
.pdt-pillar{
display:flex;align-items:center;gap:12px;
padding:8px 18px;
border-right:1px solid var(--line);
}
.pdt-pillar:last-child{border-right:0;}
.pdt-pillar-ic{
width:44px;height:44px;border-radius:10px;
background:rgba(107,14,31,.08);color:var(--maroon);
display:grid;place-items:center;font-size:1.05rem;
flex-shrink:0;
}
.pdt-pillar strong{
display:block;
font-family:var(--font-display);font-weight:700;font-size:.92rem;
color:var(--maroon-deep);margin-bottom:2px;line-height:1.2;
}
.pdt-pillar span{
font-family:var(--font-body);font-size:.74rem;color:var(--muted);
line-height:1.35;
}
@media (max-width:1024px){
.pdt-pillars-grid{grid-template-columns:repeat(2,1fr);gap:18px 0;}
.pdt-pillar{border-right:0;}
.pdt-pillar:nth-last-child(-n+2){padding-bottom:0;}
}
@media (max-width:560px){
.pdt-pillars-grid{grid-template-columns:1fr;gap:14px;}
}
/* =====================================================================
27. CATEGORY PAGE — cat-* classes (SPC heritage)
===================================================================== */
/* ============ CATEGORY HERO ============ */
.cat-hero{
background:linear-gradient(135deg, var(--cream) 0%, #fdf2da 50%, var(--cream) 100%);
padding:60px 0 50px;text-align:center;
position:relative;overflow:hidden;
}
.cat-hero-inner{max-width:760px;margin:0 auto;}
.cat-hero-tag{
display:inline-block;
font-family:var(--font-body);font-size:.7rem;font-weight:700;
letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);
padding:6px 16px;
background:rgba(188,143,77,.12);
border:1px solid rgba(188,143,77,.4);
border-radius:100px;margin-bottom:18px;
}
.cat-hero h1{
font-family:var(--font-display);font-weight:700;
font-size:clamp(2rem,4vw,3rem);color:var(--maroon-deep);
line-height:1.15;margin-bottom:14px;
}
.cat-hero-line{
display:block;width:60px;height:3px;
background:linear-gradient(90deg, var(--maroon), var(--gold));
border-radius:2px;margin:0 auto 18px;
}
.cat-hero p{
font-family:var(--font-body);font-size:1rem;line-height:1.7;
color:var(--body);max-width:600px;margin:0 auto 28px;
}
.cat-hero-stats{
display:inline-flex;gap:34px;align-items:center;
background:rgba(255,255,255,.6);
padding:16px 28px;border-radius:12px;
border:1px solid rgba(188,143,77,.3);
backdrop-filter:blur(4px);
}
.cat-hero-stats > div{display:flex;flex-direction:column;align-items:center;gap:2px;}
.cat-hero-stats strong{
font-family:var(--font-display);font-weight:700;
font-size:1.4rem;color:var(--maroon-deep);line-height:1;
}
.cat-hero-stats span{
font-family:var(--font-body);font-size:.7rem;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
/* ============ COMMON SECTION HEAD ============ */
.cat-section-head{text-align:center;margin:0 auto 36px;max-width:680px;}
.cat-eyebrow{
display:inline-flex;align-items:center;gap:12px;
font-family:var(--font-body);font-size:.7rem;font-weight:700;
letter-spacing:.34em;text-transform:uppercase;color:var(--maroon);
margin-bottom:10px;
}
.cat-eyebrow::before,.cat-eyebrow::after{
content:"";width:28px;height:1px;background:var(--gold);display:inline-block;
}
.cat-section-head h2{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--maroon-deep);
margin:0 0 10px;line-height:1.2;
}
.cat-section-sub{
font-family:var(--font-body);font-size:.95rem;color:var(--muted);
margin:0;
}
/* ============ SUBCATEGORIES GRID ============ */
.cat-subs{padding:70px 0 40px;background:var(--cream);}
.cat-subs-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.cat-sub-card{
background:#fff;border:1px solid var(--line);border-radius:12px;
overflow:hidden;
display:flex;flex-direction:column;
text-decoration:none;color:inherit;
transition:transform .35s, box-shadow .35s, border-color .35s;
}
.cat-sub-card:hover{
transform:translateY(-6px);
box-shadow:0 22px 40px -20px rgba(107,14,31,.25);
border-color:var(--gold);
text-decoration:none;color:inherit;
}
.cat-sub-img{aspect-ratio:1/1;overflow:hidden;background:var(--cream);}
.cat-sub-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.cat-sub-card:hover .cat-sub-img img{transform:scale(1.05);}
.cat-sub-body{
padding:16px 18px 18px;text-align:center;
position:relative;
}
.cat-sub-body::before{
content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
width:30px;height:1px;background:var(--gold);
}
.cat-sub-body h5{
font-family:var(--font-display);font-weight:700;
font-size:.96rem;color:var(--maroon-deep);
letter-spacing:.02em;margin:0 0 6px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:2.4em;
}
.cat-sub-body span{
font-family:var(--font-body);font-size:.66rem;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
display:inline-flex;align-items:center;gap:6px;
}
.cat-sub-body span i{font-size:.55rem;transition:transform .3s;}
.cat-sub-card:hover .cat-sub-body span i{transform:translateX(2px);}
/* ============ PRODUCTS GRID ============ */
.cat-products{padding:60px 0 80px;background:var(--cream);}
.cat-prod-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.cat-prod-card{
background:#fff;border:1px solid var(--line);border-radius:10px;
overflow:hidden;
display:flex;flex-direction:column;
text-decoration:none;color:inherit;
transition:transform .35s, box-shadow .35s, border-color .35s;
cursor:pointer;
}
.cat-prod-card:hover{
transform:translateY(-6px);
box-shadow:0 22px 40px -20px rgba(107,14,31,.25);
border-color:var(--gold);
text-decoration:none;color:inherit;
}
.cat-prod-img{aspect-ratio:1/1;overflow:hidden;background:var(--cream);}
.cat-prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.cat-prod-card:hover .cat-prod-img img{transform:scale(1.06);}
.cat-prod-body{
padding:14px 16px 16px;text-align:center;
display:flex;flex-direction:column;gap:4px;
position:relative;
}
.cat-prod-body::before{
content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
width:30px;height:1px;background:var(--gold);
}
.cat-prod-body h5{
font-family:var(--font-display);font-weight:700;
font-size:.9rem;color:var(--maroon-deep);
line-height:1.3;margin:0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:2.4em;
}
.cat-prod-body small{
font-family:var(--font-body);font-size:.64rem;color:var(--muted);
}
.cat-prod-btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
margin-top:8px;padding:7px 0;
font-family:var(--font-body);font-size:.62rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--maroon);
border:1px solid var(--maroon);border-radius:5px;
transition:background .25s, color .25s;
}
.cat-prod-btn i{font-size:.55rem;transition:transform .3s;}
.cat-prod-card:hover .cat-prod-btn{background:var(--maroon);color:#fff;}
.cat-prod-card:hover .cat-prod-btn i{transform:translateX(2px);}
/* Empty state */
.cat-empty{
text-align:center;
background:#fff;border:1px dashed var(--line);border-radius:14px;
padding:60px 30px;max-width:560px;margin:0 auto;
}
.cat-empty-ic{
width:80px;height:80px;border-radius:50%;
background:rgba(188,143,77,.12);color:var(--gold-deep);
display:grid;place-items:center;font-size:2rem;
margin:0 auto 18px;
border:1px solid rgba(188,143,77,.4);
}
.cat-empty h3{
font-family:var(--font-display);font-weight:700;
font-size:1.3rem;color:var(--maroon-deep);margin-bottom:10px;
}
.cat-empty p{
font-family:var(--font-body);font-size:.95rem;color:var(--body);
line-height:1.6;margin:0;
}
.cat-empty a{color:var(--maroon);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold);}
.cat-empty a:hover{color:var(--maroon-deep);}
/* Responsive */
@media (max-width:1024px){
.cat-subs-grid,.cat-prod-grid{grid-template-columns:repeat(3,1fr);gap:18px;}
.cat-hero-stats{gap:24px;padding:14px 22px;}
}
@media (max-width:768px){
.cat-subs-grid,.cat-prod-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media (max-width:560px){
.cat-hero{padding:40px 0 30px;}
.cat-hero-stats{gap:18px;padding:12px 18px;flex-wrap:wrap;justify-content:center;}
.cat-hero-stats strong{font-size:1.2rem;}
.cat-subs{padding:40px 0 20px;}
.cat-products{padding:40px 0 60px;}
.cat-subs-grid,.cat-prod-grid{grid-template-columns:1fr;}
}
/* =====================================================================
28. GALLERY PAGE (gal-*) — SPC heritage
===================================================================== */
.gal-hero{background:var(--cream);padding:50px 0 36px;}
.gal-hero-inner{text-align:center;max-width:780px;margin:0 auto;}
.gal-hero-tag{
display:inline-block;
font-family:var(--font-body);font-weight:700;font-size:.72rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
background:rgba(188,143,77,.1);padding:8px 18px;border-radius:30px;
border:1px solid rgba(188,143,77,.3);margin-bottom:14px;
}
.gal-hero h1{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--maroon-deep);
margin-bottom:10px;line-height:1.15;
}
.gal-hero-line{
display:block;width:64px;height:3px;background:var(--gold);
margin:0 auto 16px;border-radius:2px;
}
.gal-hero p{
font-family:var(--font-body);font-size:.95rem;color:var(--body);
line-height:1.7;margin-bottom:22px;
}
.gal-hero-stats{
display:inline-flex;gap:36px;padding:16px 28px;
background:#fff;border:1px solid rgba(188,143,77,.3);border-radius:12px;
}
.gal-hero-stats > div{display:flex;flex-direction:column;align-items:center;}
.gal-hero-stats strong{
font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--maroon);
}
.gal-hero-stats span{
font-family:var(--font-body);font-size:.7rem;color:var(--muted);
letter-spacing:.1em;text-transform:uppercase;margin-top:2px;
}
/* Filter chips */
.gal-filter-sec{background:var(--cream);padding:0 0 30px;}
.gal-chips{
display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.gal-chip{
display:inline-flex;align-items:center;gap:8px;
background:#fff;border:1.5px solid var(--line);border-radius:30px;
padding:9px 16px;cursor:pointer;
font-family:var(--font-body);font-size:.8rem;font-weight:500;color:var(--ink);
transition:all .25s;
}
.gal-chip i{color:var(--gold-deep);font-size:.78rem;}
.gal-chip:hover{border-color:var(--gold);color:var(--maroon);}
.gal-chip.is-active{
background:var(--maroon);color:#fff;border-color:var(--maroon);
box-shadow:0 6px 16px -8px rgba(107,14,31,.45);
}
.gal-chip.is-active i,
.gal-chip.is-active .gal-chip-count{color:#fff;}
.gal-chip-count{
display:inline-block;font-size:.68rem;font-weight:700;
background:rgba(188,143,77,.15);color:var(--gold-deep);
padding:2px 8px;border-radius:10px;
}
/* Grid */
.gal-grid-sec{background:var(--cream);padding:0 0 60px;}
.gal-grid{
display:grid;grid-template-columns:repeat(4, 1fr);gap:16px;
}
.gal-item{margin:0;}
.gal-img-wrap{
position:relative;background:#fff;border:1px solid var(--line);
border-radius:12px;overflow:hidden;aspect-ratio:1/1;
box-shadow:0 6px 18px -12px rgba(107,14,31,.18);
transition:transform .35s, box-shadow .35s, border-color .35s;
}
.gal-img-wrap:hover{
transform:translateY(-4px);
border-color:var(--gold);
box-shadow:0 18px 32px -16px rgba(107,14,31,.3);
}
.gal-img-wrap > a{display:block;width:100%;height:100%;text-decoration:none;}
.gal-img-wrap img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s;
}
.gal-img-wrap:hover img{transform:scale(1.05);}
.gal-zoom{
position:absolute;top:12px;right:12px;
width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.92);color:var(--maroon);
display:grid;place-items:center;font-size:.78rem;
opacity:0;transform:scale(.8);transition:opacity .25s, transform .25s;
}
.gal-img-wrap:hover .gal-zoom{opacity:1;transform:scale(1);}
.gal-overlay{
position:absolute;left:0;right:0;bottom:0;
padding:14px 14px 12px;
background:linear-gradient(180deg, transparent 0%, rgba(42,8,16,.92) 100%);
color:#fff;
transform:translateY(20%);opacity:0;
transition:transform .35s, opacity .35s;
}
.gal-img-wrap:hover .gal-overlay{transform:translateY(0);opacity:1;}
.gal-cat{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-body);font-size:.62rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
color:var(--gold);margin-bottom:6px;
}
.gal-title{
font-family:var(--font-display);font-weight:600;font-size:.92rem;
color:#fff;margin:0 0 8px;line-height:1.25;
}
.gal-view-btn{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-body);font-size:.72rem;font-weight:600;
color:var(--gold);text-decoration:none;
}
.gal-view-btn:hover{color:#fff;}
.gal-empty{
text-align:center;padding:60px 24px;
background:#fff;border:1px dashed var(--line);border-radius:12px;
}
.gal-empty-ic{
width:64px;height:64px;border-radius:50%;
background:rgba(188,143,77,.12);color:var(--gold-deep);
display:grid;place-items:center;font-size:1.5rem;
margin:0 auto 14px;
}
.gal-empty h3{
font-family:var(--font-display);color:var(--maroon-deep);
font-size:1.2rem;margin-bottom:6px;
}
.gal-empty p{
font-family:var(--font-body);color:var(--muted);font-size:.9rem;
}
.gal-empty a{color:var(--maroon);font-weight:600;}
/* Lightbox */
.glb-overlay{
position:fixed;inset:0;background:rgba(20,5,10,.94);
display:none;align-items:center;justify-content:center;
padding:30px;z-index:9999;
}
.glb-overlay.open{display:flex;}
.glb-img-wrap{
position:relative;max-width:min(900px,92vw);max-height:90vh;
display:flex;flex-direction:column;align-items:center;
}
#glbImg{
max-width:100%;max-height:78vh;object-fit:contain;
border-radius:8px;box-shadow:0 30px 80px -10px rgba(0,0,0,.6);
background:#fff;
}
.glb-caption-wrap{
margin-top:18px;text-align:center;color:#fff;max-width:600px;
}
.glb-cat{
display:inline-block;
font-family:var(--font-body);font-weight:700;font-size:.66rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
margin-bottom:6px;
}
.glb-caption{
font-family:var(--font-display);font-size:1.1rem;color:#fff;
line-height:1.3;margin-bottom:10px;
}
.glb-view-link{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-body);font-size:.82rem;font-weight:600;
color:var(--gold);text-decoration:none;
padding:8px 18px;border:1px solid var(--gold);border-radius:24px;
transition:all .25s;
}
.glb-view-link:hover{background:var(--gold);color:#fff;}
.glb-close{
position:fixed;top:20px;right:20px;
width:42px;height:42px;border-radius:50%;
background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);
display:grid;place-items:center;cursor:pointer;font-size:1rem;
transition:all .25s;z-index:10000;
}
.glb-close:hover{background:var(--maroon);border-color:var(--maroon);transform:rotate(90deg);}
.glb-nav{
position:fixed;top:50%;transform:translateY(-50%);
width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);
display:grid;place-items:center;cursor:pointer;font-size:1rem;
transition:all .25s;
}
.glb-prev{left:24px;}
.glb-next{right:24px;}
.glb-nav:hover{background:var(--maroon);border-color:var(--maroon);}
@media (max-width:1024px){
.gal-grid{grid-template-columns:repeat(3, 1fr);}
.gal-hero-stats{gap:22px;padding:14px 22px;}
}
@media (max-width:760px){
.gal-grid{grid-template-columns:repeat(2, 1fr);}
.gal-hero{padding:36px 0 28px;}
.gal-hero-stats{flex-wrap:wrap;justify-content:center;gap:14px;}
.gal-chip{font-size:.74rem;padding:7px 12px;}
.glb-nav{width:40px;height:40px;}
.glb-prev{left:8px;} .glb-next{right:8px;}
}
@media (max-width:480px){
.gal-grid{grid-template-columns:1fr;gap:14px;}
}
/* =====================================================================
29. CONTACT US PAGE (cnt-*) — SPC heritage
===================================================================== */
.cnt-banner{display:block;line-height:0;}
.cnt-banner img{width:100%;height:auto;display:block;}
.cnt-hero{background:var(--cream);padding:50px 0 36px;}
.cnt-hero-inner{text-align:center;max-width:780px;margin:0 auto;}
.cnt-hero-tag{
display:inline-block;
font-family:var(--font-body);font-weight:700;font-size:.72rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
background:rgba(188,143,77,.1);padding:8px 18px;border-radius:30px;
border:1px solid rgba(188,143,77,.3);margin-bottom:14px;
}
.cnt-hero h1{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.8rem,3.5vw,2.5rem);color:var(--maroon-deep);
margin-bottom:10px;line-height:1.2;
}
.cnt-hero-line{display:block;width:64px;height:3px;background:var(--gold);margin:0 auto 16px;border-radius:2px;}
.cnt-hero p{
font-family:var(--font-body);font-size:.95rem;color:var(--body);
line-height:1.7;margin-bottom:22px;
}
.cnt-hero-stats{
display:inline-flex;gap:36px;padding:16px 28px;
background:#fff;border:1px solid rgba(188,143,77,.3);border-radius:12px;
}
.cnt-hero-stats > div{display:flex;flex-direction:column;align-items:center;}
.cnt-hero-stats strong{
font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--maroon);
}
.cnt-hero-stats span{
font-family:var(--font-body);font-size:.68rem;color:var(--muted);
letter-spacing:.1em;text-transform:uppercase;margin-top:2px;
}
/* MAIN 2-COL: info + form */
.cnt-main{background:var(--cream);padding:30px 0 60px;}
.cnt-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:start;}
/* Info column */
.cnt-info-col{display:flex;flex-direction:column;gap:12px;}
.cnt-info-card{
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:18px 20px;display:flex;gap:14px;align-items:flex-start;
transition:border-color .25s, transform .25s, box-shadow .25s;
}
.cnt-info-card:hover{
border-color:var(--gold);transform:translateY(-2px);
box-shadow:0 12px 24px -16px rgba(107,14,31,.2);
}
.cnt-info-ic{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
background:rgba(107,14,31,.08);color:var(--maroon);
display:grid;place-items:center;font-size:1rem;
}
.cnt-info-card-wa .cnt-info-ic{background:rgba(30,190,87,.12);color:#1ebe57;}
.cnt-info-body{flex:1;min-width:0;}
.cnt-info-body strong{
display:block;font-family:var(--font-display);font-weight:700;font-size:.95rem;
color:var(--maroon-deep);margin-bottom:4px;
}
.cnt-info-body p{
font-family:var(--font-body);font-size:.85rem;color:var(--body);
line-height:1.55;margin:0 0 8px;
}
.cnt-info-link{
display:inline-flex;align-items:center;gap:5px;
font-family:var(--font-body);font-size:.74rem;font-weight:600;
color:var(--maroon);text-decoration:none;letter-spacing:.04em;
transition:color .25s;
}
.cnt-info-link i{font-size:.7rem;}
.cnt-info-link:hover{color:var(--gold-deep);}
.cnt-map{
background:#fff;border:1px solid var(--line);border-radius:12px;
overflow:hidden;height:260px;margin-top:4px;
}
.cnt-map iframe{width:100%;height:100%;border:0;display:block;}
/* Form card */
.cnt-form-card{
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:30px 28px;
}
.cnt-form-tag{
display:inline-block;
font-family:var(--font-body);font-weight:700;font-size:.66rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
background:rgba(188,143,77,.1);padding:6px 14px;border-radius:20px;
border:1px solid rgba(188,143,77,.3);margin-bottom:12px;
}
.cnt-form-card h2{
font-family:var(--font-display);font-weight:700;font-size:1.5rem;
color:var(--maroon-deep);margin-bottom:8px;
}
.cnt-form-intro{
font-family:var(--font-body);font-size:.88rem;color:var(--body);
line-height:1.6;margin-bottom:22px;
}
.cnt-form{display:flex;flex-direction:column;gap:14px;}
.cnt-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cnt-field{display:flex;flex-direction:column;gap:5px;}
.cnt-field label{
font-family:var(--font-body);font-size:.74rem;font-weight:600;
color:var(--maroon-deep);letter-spacing:.03em;
}
.cnt-field input,
.cnt-field select,
.cnt-field textarea{
width:100%;padding:11px 13px;
border:1px solid var(--line);border-radius:8px;
font-family:var(--font-body);font-size:.88rem;color:var(--ink);
background:#fff;transition:border-color .2s, box-shadow .2s;
}
.cnt-field input:focus,
.cnt-field select:focus,
.cnt-field textarea:focus{
outline:none;border-color:var(--maroon);
box-shadow:0 0 0 3px rgba(107,14,31,.08);
}
.cnt-field textarea{resize:vertical;min-height:90px;}
.cnt-agree{
display:flex;gap:10px;align-items:flex-start;
font-family:var(--font-body);font-size:.78rem;color:var(--body);
line-height:1.5;margin-top:4px;
}
.cnt-agree input{margin-top:3px;accent-color:var(--maroon);flex-shrink:0;}
.cnt-agree a{color:var(--maroon);font-weight:600;text-decoration:underline;}
.cnt-form-actions{display:flex;gap:12px;align-items:center;margin-top:6px;}
.cnt-btn-reset{
padding:12px 22px;border:1.5px solid var(--line);
background:#fff;color:var(--body);border-radius:8px;cursor:pointer;
font-family:var(--font-body);font-size:.82rem;font-weight:600;
transition:all .25s;
}
.cnt-btn-reset:hover{border-color:var(--maroon);color:var(--maroon);}
.cnt-btn-submit{
flex:1;padding:12px 24px;border:0;
background:var(--maroon);color:#fff;border-radius:8px;cursor:pointer;
font-family:var(--font-body);font-size:.84rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;
display:flex;align-items:center;justify-content:center;gap:8px;
transition:background .25s, transform .25s;
}
.cnt-btn-submit:hover:not(:disabled){background:var(--maroon-deep);transform:translateY(-1px);}
.cnt-btn-submit:disabled{opacity:.7;cursor:wait;}
.cnt-success{
margin-top:18px;padding:24px 22px;text-align:center;
background:#E8F8EE;border:1px solid #B6E8C8;border-radius:12px;
}
.cnt-success-ic{
width:54px;height:54px;margin:0 auto 12px;border-radius:50%;
background:linear-gradient(135deg,#1ebe57,#25D366);color:#fff;
display:grid;place-items:center;font-size:1.5rem;
}
.cnt-success h4{font-family:var(--font-display);color:var(--maroon-deep);font-size:1.1rem;margin-bottom:5px;}
.cnt-success p{font-family:var(--font-body);color:var(--body);font-size:.85rem;line-height:1.5;}
/* WHY PARTNER band */
.cnt-why{background:#fff;padding:50px 0;}
.cnt-section-head{text-align:center;margin-bottom:30px;}
.cnt-section-head h2{
font-family:var(--font-display);font-weight:700;font-size:1.7rem;
color:var(--maroon-deep);margin-top:6px;
}
.cnt-why-grid{
display:grid;grid-template-columns:repeat(4, 1fr);gap:18px;
}
.cnt-why-item{
text-align:center;padding:24px 18px;
background:var(--cream);border:1px solid var(--line);border-radius:12px;
transition:transform .25s, border-color .25s, box-shadow .25s;
}
.cnt-why-item:hover{
transform:translateY(-4px);border-color:var(--gold);
box-shadow:0 14px 28px -16px rgba(107,14,31,.2);
}
.cnt-why-ic{
width:54px;height:54px;border-radius:50%;
background:rgba(107,14,31,.08);color:var(--maroon);
display:grid;place-items:center;font-size:1.2rem;
margin:0 auto 12px;
border:1px solid rgba(188,143,77,.3);
}
.cnt-why-item strong{
display:block;font-family:var(--font-display);font-weight:700;font-size:.98rem;
color:var(--maroon-deep);margin-bottom:6px;
}
.cnt-why-item p{
font-family:var(--font-body);font-size:.78rem;color:var(--body);
line-height:1.55;margin:0;
}
/* ASSISTANCE BAND */
.cnt-assist{background:var(--maroon-deep);padding:36px 0;}
.cnt-assist-inner{
display:flex;align-items:center;justify-content:space-between;gap:24px;
flex-wrap:wrap;
}
.cnt-assist-left{display:flex;align-items:center;gap:18px;color:#fff;}
.cnt-assist-ic{
width:54px;height:54px;border-radius:50%;
background:rgba(188,143,77,.2);color:var(--gold);
display:grid;place-items:center;font-size:1.3rem;
border:1px solid rgba(188,143,77,.4);flex-shrink:0;
}
.cnt-assist-left h3{
font-family:var(--font-display);font-weight:700;font-size:1.2rem;
color:#fff;margin-bottom:2px;
}
.cnt-assist-left p{
font-family:var(--font-body);font-size:.84rem;
color:rgba(255,255,255,.78);margin:0;
}
.cnt-assist-btns{display:flex;gap:10px;flex-wrap:wrap;}
.cnt-assist-btn{
display:inline-flex;align-items:center;gap:8px;
padding:11px 22px;border-radius:8px;
font-family:var(--font-body);font-size:.82rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
transition:all .25s;
}
.cnt-assist-call{background:var(--gold);color:var(--maroon-deep);}
.cnt-assist-call:hover{background:#fff;}
.cnt-assist-wa{background:#25D366;color:#fff;}
.cnt-assist-wa:hover{background:#1ebe57;}
@media (max-width:1024px){
.cnt-grid{grid-template-columns:1fr;}
.cnt-why-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:640px){
.cnt-row-2{grid-template-columns:1fr;}
.cnt-form-card{padding:24px 20px;}
.cnt-form-actions{flex-direction:column;align-items:stretch;}
.cnt-btn-reset{order:2;}
.cnt-btn-submit{order:1;}
.cnt-hero-stats{flex-wrap:wrap;gap:18px;justify-content:center;}
.cnt-why-grid{grid-template-columns:1fr;}
.cnt-assist-inner{flex-direction:column;text-align:center;}
.cnt-assist-left{flex-direction:column;text-align:center;}
}
/* =====================================================================
30. SITEMAP PAGE (smap-*) — SPC heritage
===================================================================== */
.smap-banner{display:block;line-height:0;}
.smap-banner img{width:100%;height:auto;display:block;}
.smap-hero{background:var(--cream);padding:50px 0 36px;}
.smap-hero-inner{text-align:center;max-width:780px;margin:0 auto;}
.smap-hero-tag{
display:inline-block;
font-family:var(--font-body);font-weight:700;font-size:.72rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
background:rgba(188,143,77,.1);padding:8px 18px;border-radius:30px;
border:1px solid rgba(188,143,77,.3);margin-bottom:14px;
}
.smap-hero h1{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.8rem,3.5vw,2.5rem);color:var(--maroon-deep);
margin-bottom:10px;line-height:1.2;
}
.smap-hero-line{display:block;width:64px;height:3px;background:var(--gold);margin:0 auto 16px;border-radius:2px;}
.smap-hero p{
font-family:var(--font-body);font-size:.95rem;color:var(--body);
line-height:1.7;margin-bottom:22px;
}
.smap-hero-stats{
display:inline-flex;gap:36px;padding:16px 28px;
background:#fff;border:1px solid rgba(188,143,77,.3);border-radius:12px;
}
.smap-hero-stats > div{display:flex;flex-direction:column;align-items:center;}
.smap-hero-stats strong{
font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--maroon);
}
.smap-hero-stats span{
font-family:var(--font-body);font-size:.68rem;color:var(--muted);
letter-spacing:.1em;text-transform:uppercase;margin-top:2px;
}
/* Sitemap body */
.smap-sec{background:var(--cream);padding:30px 0 60px;}
.smap-block{
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:28px 26px;margin-bottom:18px;
}
.smap-head{
display:flex;align-items:flex-start;gap:18px;
padding-bottom:18px;margin-bottom:20px;
border-bottom:1px solid var(--line);
}
.smap-num{
font-family:var(--font-display);font-weight:700;font-size:1.6rem;
color:var(--gold-deep);line-height:1;flex-shrink:0;
background:rgba(188,143,77,.1);
width:54px;height:54px;border-radius:12px;
display:grid;place-items:center;
border:1px solid rgba(188,143,77,.3);
}
.smap-head h2{
font-family:var(--font-display);font-weight:700;font-size:1.35rem;
color:var(--maroon-deep);margin-bottom:4px;
}
.smap-head p{
font-family:var(--font-body);font-size:.85rem;color:var(--body);
line-height:1.55;margin:0;
}
/* Flat link list */
.smap-links{
display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;
}
.smap-prod-links{grid-template-columns:repeat(3, 1fr);}
.smap-link{
display:inline-flex;align-items:center;gap:8px;
padding:10px 14px;background:var(--cream);border:1px solid var(--line);
border-radius:8px;text-decoration:none;
font-family:var(--font-body);font-size:.84rem;color:var(--ink);
transition:all .25s;
}
.smap-link i{color:var(--gold-deep);font-size:.7rem;flex-shrink:0;}
.smap-link:hover{
border-color:var(--maroon);background:#fff;color:var(--maroon);
transform:translateX(2px);
}
.smap-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Category tree */
.smap-cats{display:grid;grid-template-columns:repeat(2, 1fr);gap:18px;}
.smap-cat{
padding:18px 20px;
background:var(--cream);border:1px solid var(--line);border-radius:10px;
transition:border-color .25s;
}
.smap-cat:hover{border-color:var(--gold);}
.smap-cat-title{
display:flex;align-items:center;gap:10px;
font-family:var(--font-display);font-weight:700;font-size:.98rem;
color:var(--maroon-deep);text-decoration:none;
padding-bottom:10px;margin-bottom:10px;
border-bottom:1px dashed var(--line);
}
.smap-cat-title i{color:var(--gold-deep);font-size:.85rem;}
.smap-cat-title:hover{color:var(--maroon);}
.smap-cat-count{
margin-left:auto;font-family:var(--font-body);font-size:.7rem;font-weight:600;
background:rgba(107,14,31,.08);color:var(--maroon);
padding:2px 9px;border-radius:10px;
}
.smap-cat ul{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:5px;
}
.smap-cat ul li a{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-body);font-size:.82rem;color:var(--body);
text-decoration:none;padding:3px 0;transition:color .2s, padding-left .2s;
}
.smap-cat ul li a::before{
content:"›";color:var(--gold-deep);font-size:1rem;line-height:1;
}
.smap-cat ul li a:hover{color:var(--maroon);padding-left:4px;}
/* City × Collections */
.smap-cities{display:flex;flex-direction:column;gap:8px;}
.smap-city{
background:var(--cream);border:1px solid var(--line);border-radius:10px;
overflow:hidden;
}
.smap-city summary{
display:flex;align-items:center;gap:12px;cursor:pointer;
padding:14px 18px;list-style:none;
font-family:var(--font-body);
transition:background .2s;
}
.smap-city summary::-webkit-details-marker{display:none;}
.smap-city summary:hover{background:rgba(188,143,77,.06);}
.smap-city summary > i:first-child{color:var(--maroon);font-size:.95rem;}
.smap-city-name{
font-family:var(--font-display);font-weight:600;font-size:.95rem;
color:var(--maroon-deep);
}
.smap-city-count{
margin-left:auto;font-size:.72rem;color:var(--muted);
background:#fff;padding:3px 9px;border-radius:10px;
border:1px solid var(--line);
}
.smap-city-chev{color:var(--gold-deep);font-size:.75rem;transition:transform .25s;}
.smap-city[open] .smap-city-chev{transform:rotate(180deg);}
.smap-city-products{
display:grid;grid-template-columns:repeat(2, 1fr);gap:6px;
padding:6px 18px 18px;
}
.smap-city-product{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 12px;background:#fff;border:1px solid var(--line);
border-radius:8px;text-decoration:none;
font-family:var(--font-body);font-size:.8rem;color:var(--body);
transition:all .2s;
}
.smap-city-product i{color:var(--gold-deep);font-size:.7rem;}
.smap-city-product:hover{
border-color:var(--maroon);color:var(--maroon);
transform:translateX(2px);
}
/* Footer card */
.smap-footer{
display:flex;align-items:center;gap:18px;
background:linear-gradient(135deg, var(--maroon-deep), var(--maroon));
border-radius:14px;padding:22px 26px;color:#fff;
}
.smap-footer-ic{
width:50px;height:50px;border-radius:50%;
background:rgba(188,143,77,.2);color:var(--gold);
display:grid;place-items:center;font-size:1.2rem;
border:1px solid rgba(188,143,77,.4);flex-shrink:0;
}
.smap-footer-text{flex:1;}
.smap-footer-text strong{
display:block;font-family:var(--font-display);font-size:1.05rem;color:#fff;margin-bottom:2px;
}
.smap-footer-text span{
font-family:var(--font-body);font-size:.82rem;color:rgba(255,255,255,.78);
}
.smap-footer-actions{display:flex;gap:10px;flex-wrap:wrap;}
.smap-footer-actions a{
display:inline-flex;align-items:center;gap:7px;
padding:9px 16px;border-radius:8px;text-decoration:none;
background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);
font-family:var(--font-body);font-size:.78rem;font-weight:600;
transition:all .25s;
}
.smap-footer-actions a:hover{background:var(--gold);color:var(--maroon-deep);border-color:var(--gold);}
@media (max-width:1024px){
.smap-cats{grid-template-columns:1fr;}
.smap-prod-links{grid-template-columns:repeat(2, 1fr);}
.smap-city-products{grid-template-columns:1fr;}
}
@media (max-width:760px){
.smap-links,.smap-prod-links{grid-template-columns:repeat(2, 1fr);}
.smap-head{flex-direction:column;gap:12px;}
.smap-footer{flex-direction:column;text-align:center;}
.smap-hero-stats{flex-wrap:wrap;gap:18px;justify-content:center;}
}
@media (max-width:480px){
.smap-links,.smap-prod-links{grid-template-columns:1fr;}
}
/* =====================================================================
31. POLICY / DB PAGE TEMPLATE (pg-*) — SPC heritage
===================================================================== */
.pg-hero{background:var(--cream);padding:54px 0 40px;}
.pg-hero-inner{text-align:center;max-width:780px;margin:0 auto;}
.pg-hero-tag{
display:inline-block;
font-family:var(--font-body);font-weight:700;font-size:.72rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
background:rgba(188,143,77,.1);padding:8px 18px;border-radius:30px;
border:1px solid rgba(188,143,77,.3);margin-bottom:14px;
}
.pg-hero h1{
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.9rem,3.5vw,2.6rem);color:var(--maroon-deep);
margin-bottom:12px;line-height:1.15;
}
.pg-hero-line{display:block;width:64px;height:3px;background:var(--gold);margin:0 auto 16px;border-radius:2px;}
.pg-hero-crumb{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-body);font-size:.82rem;color:var(--maroon);
}
.pg-hero-crumb a{color:var(--maroon);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.pg-hero-crumb a:hover{color:var(--maroon-deep);}
.pg-hero-crumb > i{font-size:.65rem;color:var(--gold-deep);}
/* Content area */
.pg-content-sec{background:var(--cream);padding:30px 0 60px;}
.pg-content-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:start;}
.pg-article{
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:36px 38px;
font-family:var(--font-body);font-size:.95rem;line-height:1.75;color:var(--body);
}
.pg-article h2{
font-family:var(--font-display);font-weight:700;font-size:1.65rem;
color:var(--maroon-deep);margin-bottom:16px;line-height:1.2;
}
.pg-article h3{
font-family:var(--font-display);font-weight:700;font-size:1.15rem;
color:var(--maroon-deep);margin-top:28px;margin-bottom:10px;
padding-bottom:8px;border-bottom:1px solid var(--line);
}
.pg-article h4{
font-family:var(--font-display);font-weight:700;font-size:1rem;
color:var(--maroon-deep);margin-top:20px;margin-bottom:8px;
}
.pg-article p{margin-bottom:14px;}
.pg-article ul,.pg-article ol{margin:0 0 18px 22px;}
.pg-article ul li,.pg-article ol li{margin-bottom:8px;}
.pg-article strong{color:var(--ink);font-weight:700;}
.pg-article a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px;}
.pg-article a:hover{color:var(--maroon-deep);}
/* Side */
.pg-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:24px;}
.pg-side-card{
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:24px 22px;
}
.pg-side-ic{
width:48px;height:48px;border-radius:50%;
background:rgba(107,14,31,.08);color:var(--maroon);
display:grid;place-items:center;font-size:1.1rem;
margin-bottom:12px;
border:1px solid rgba(188,143,77,.3);
}
.pg-side-card h3{
font-family:var(--font-display);font-weight:700;font-size:1.05rem;
color:var(--maroon-deep);margin-bottom:6px;
}
.pg-side-card h4{
font-family:var(--font-display);font-weight:700;font-size:.95rem;
color:var(--maroon-deep);margin-bottom:12px;
}
.pg-side-card p{
font-family:var(--font-body);font-size:.85rem;color:var(--body);
line-height:1.55;margin-bottom:16px;
}
.pg-side-actions{display:flex;flex-direction:column;gap:8px;}
.pg-side-btn{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:10px 14px;border-radius:8px;text-decoration:none;
font-family:var(--font-body);font-size:.78rem;font-weight:700;
letter-spacing:.04em;text-transform:uppercase;
transition:all .25s;
}
.pg-side-btn-primary{background:var(--maroon);color:#fff;}
.pg-side-btn-primary:hover{background:var(--maroon-deep);}
.pg-side-btn-wa{background:#25D366;color:#fff;}
.pg-side-btn-wa:hover{background:#1ebe57;}
.pg-side-meta ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.pg-side-meta ul li a{
display:flex;align-items:center;gap:8px;
padding:9px 11px;background:var(--cream);border:1px solid var(--line);
border-radius:8px;text-decoration:none;
font-family:var(--font-body);font-size:.84rem;color:var(--ink);
transition:all .2s;
}
.pg-side-meta ul li a i{color:var(--gold-deep);font-size:.85rem;width:18px;text-align:center;}
.pg-side-meta ul li a:hover{border-color:var(--maroon);color:var(--maroon);background:#fff;}
@media (max-width:1024px){
.pg-content-grid{grid-template-columns:1fr;}
.pg-side{position:static;}
}
@media (max-width:560px){
.pg-article{padding:24px 20px;}
}
/* =====================================================================
32. BLOG PAGE (blg-*) — SPC heritage
===================================================================== */
.blg-grid-sec{background:var(--cream);padding:30px 0 60px;}
.blg-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;}
.blg-card{
background:#fff;border:1px solid var(--line);border-radius:12px;
overflow:hidden;display:flex;flex-direction:column;
transition:transform .3s, box-shadow .3s, border-color .3s;
}
.blg-card:hover{
transform:translateY(-4px);border-color:var(--gold);
box-shadow:0 16px 30px -18px rgba(107,14,31,.25);
}
.blg-card-img{
display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
text-decoration:none;
}
.blg-card-img img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s;
}
.blg-card:hover .blg-card-img img{transform:scale(1.06);}
.blg-card-zoom{
position:absolute;right:14px;bottom:14px;
width:36px;height:36px;border-radius:50%;
background:var(--maroon);color:#fff;
display:grid;place-items:center;font-size:.8rem;
opacity:0;transform:translateY(8px);
transition:opacity .25s, transform .25s;
}
.blg-card:hover .blg-card-zoom{opacity:1;transform:translateY(0);}
.blg-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.blg-card-meta{
font-family:var(--font-body);font-size:.7rem;font-weight:600;
color:var(--gold-deep);letter-spacing:.06em;text-transform:uppercase;
margin-bottom:8px;display:inline-flex;align-items:center;gap:6px;
}
.blg-card-body h3{
font-family:var(--font-display);font-weight:700;font-size:1.1rem;
line-height:1.3;margin-bottom:10px;
}
.blg-card-body h3 a{color:var(--maroon-deep);text-decoration:none;transition:color .2s;}
.blg-card-body h3 a:hover{color:var(--maroon);}
.blg-card-body p{
font-family:var(--font-body);font-size:.84rem;color:var(--body);
line-height:1.6;margin-bottom:14px;flex:1;
}
.blg-card-btn{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-body);font-size:.78rem;font-weight:700;
color:var(--maroon);text-decoration:none;letter-spacing:.05em;
align-self:flex-start;transition:gap .25s, color .25s;
}
.blg-card-btn:hover{color:var(--maroon-deep);gap:10px;}
.blg-empty{
text-align:center;padding:60px 24px;
background:#fff;border:1px dashed var(--line);border-radius:14px;
}
.blg-empty-ic{
width:64px;height:64px;border-radius:50%;
background:rgba(188,143,77,.12);color:var(--gold-deep);
display:grid;place-items:center;font-size:1.5rem;
margin:0 auto 14px;
}
.blg-empty h3{
font-family:var(--font-display);color:var(--maroon-deep);font-size:1.25rem;margin-bottom:8px;
}
.blg-empty p{
font-family:var(--font-body);color:var(--body);font-size:.92rem;
line-height:1.6;max-width:520px;margin:0 auto 18px;
}
.blg-empty a{color:var(--maroon);font-weight:600;text-decoration:underline;}
.blg-empty-actions{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.blg-empty-btn{
display:inline-flex;align-items:center;gap:8px;
padding:11px 22px;background:var(--maroon);color:#fff!important;
border-radius:8px;text-decoration:none!important;
font-family:var(--font-body);font-size:.8rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;transition:background .2s;
}
.blg-empty-btn:hover{background:var(--maroon-deep);}
.blg-empty-btn-alt{background:#fff;color:var(--maroon)!important;border:1.5px solid var(--maroon);}
.blg-empty-btn-alt:hover{background:var(--maroon);color:#fff!important;}
@media (max-width:1024px){.blg-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:640px){.blg-grid{grid-template-columns:1fr;gap:16px;}}
/* =====================================================================
33. MARKET AREA PAGE (mkt-*) — SPC heritage
===================================================================== */
.mkt-stats-sec{background:var(--cream);padding:20px 0 0;}
.mkt-stats{
display:grid;grid-template-columns:repeat(4, 1fr);gap:16px;
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:24px 20px;
}
.mkt-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.mkt-stat-ic{
width:48px;height:48px;border-radius:50%;
background:rgba(188,143,77,.12);color:var(--gold-deep);
display:grid;place-items:center;font-size:1.1rem;
border:1px solid rgba(188,143,77,.3);margin-bottom:6px;
}
.mkt-stat strong{
font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--maroon-deep);
line-height:1;
}
.mkt-stat span{
font-family:var(--font-body);font-size:.72rem;color:var(--muted);
letter-spacing:.1em;text-transform:uppercase;margin-top:2px;
}
.mkt-locs-sec{background:var(--cream);padding:40px 0 30px;}
.mkt-section-head{text-align:center;margin-bottom:30px;max-width:680px;margin-left:auto;margin-right:auto;}
.mkt-section-head h2{
font-family:var(--font-display);font-weight:700;font-size:1.85rem;
color:var(--maroon-deep);margin-top:6px;margin-bottom:8px;
}
.mkt-section-sub{
font-family:var(--font-body);font-size:.92rem;color:var(--body);
line-height:1.6;
}
.mkt-locs-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;}
.mkt-loc-card{
display:flex;flex-direction:column;
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:24px 22px;text-decoration:none;color:inherit;
transition:transform .3s, border-color .3s, box-shadow .3s;
}
.mkt-loc-card:hover{
transform:translateY(-4px);border-color:var(--gold);
box-shadow:0 16px 30px -18px rgba(107,14,31,.25);
}
.mkt-loc-ic{
width:54px;height:54px;border-radius:50%;
background:rgba(107,14,31,.08);color:var(--maroon);
display:grid;place-items:center;font-size:1.25rem;
margin-bottom:14px;border:1px solid rgba(188,143,77,.3);
}
.mkt-loc-tag{
display:inline-block;align-self:flex-start;
font-family:var(--font-body);font-size:.65rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);
background:rgba(188,143,77,.1);padding:4px 10px;border-radius:14px;
margin-bottom:8px;
}
.mkt-loc-card h3{
font-family:var(--font-display);font-weight:700;font-size:1.2rem;
color:var(--maroon-deep);margin-bottom:8px;
}
.mkt-loc-card p{
font-family:var(--font-body);font-size:.85rem;color:var(--body);
line-height:1.55;margin-bottom:14px;flex:1;
}
.mkt-loc-btn{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-body);font-size:.76rem;font-weight:700;
color:var(--maroon);letter-spacing:.05em;
align-self:flex-start;transition:gap .25s, color .25s;
}
.mkt-loc-card:hover .mkt-loc-btn{gap:10px;color:var(--maroon-deep);}
/* How we ship */
.mkt-how-sec{background:#fff;padding:50px 0;}
.mkt-how-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px;}
.mkt-how-step{
position:relative;padding:24px 20px;
background:var(--cream);border:1px solid var(--line);border-radius:12px;
transition:border-color .25s, transform .25s;
}
.mkt-how-step:hover{border-color:var(--gold);transform:translateY(-3px);}
.mkt-how-num{
position:absolute;top:-12px;right:18px;
background:var(--maroon);color:var(--gold);
font-family:var(--font-display);font-weight:700;font-size:.95rem;
padding:6px 12px;border-radius:8px;letter-spacing:.05em;
}
.mkt-how-step h4{
font-family:var(--font-display);font-weight:700;font-size:1.05rem;
color:var(--maroon-deep);margin-bottom:8px;margin-top:6px;
}
.mkt-how-step p{
font-family:var(--font-body);font-size:.82rem;color:var(--body);
line-height:1.6;margin:0;
}
@media (max-width:1024px){
.mkt-stats{grid-template-columns:repeat(2, 1fr);}
.mkt-locs-grid{grid-template-columns:repeat(2, 1fr);}
.mkt-how-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
.mkt-stats{grid-template-columns:1fr;}
.mkt-locs-grid,.mkt-how-grid{grid-template-columns:1fr;}
}