/*=========================================
AAMKARI WEBSITE V2
GLOBAL DESIGN SYSTEM
==========================================*/

:root{

--background:#F8F5F0;
--surface:#FFFFFF;
--text:#181818;
--muted:#777777;
--gold:#B08A45;
--gold-light:#D8B97A;
--border:#E7E1D6;

--transition:.45s ease;
--radius:22px;

--shadow:0 20px 60px rgba(0,0,0,.08);

--container:1240px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

background:var(--background);

font-family:"Inter",sans-serif;

color:var(--text);

line-height:1.8;

overflow-x:hidden;

}

.hero {
   position: relative;
   overflow: hidden;
   background: #F8F5F0;
}

.hero::before {
   content: "";
   position: absolute;
   inset: 0;

   background-image: url("assets/images/hero-watermark.jpg");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;

   opacity: 0.18;
   z-index: 0;
}

.hero > * {
   position: relative;
   z-index: 1;
}








img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(92%,var(--container));

margin:auto;

}

/*=========================================
TYPOGRAPHY
==========================================*/

h1,h2,h3,h4{

font-family:"Cormorant Garamond",serif;

font-weight:600;

letter-spacing:.5px;

}

h1{

font-size:clamp(3.5rem,8vw,6.5rem);

line-height:1;

}

h2{

font-size:clamp(2.6rem,5vw,4.5rem);

margin-bottom:20px;

}

h3{

font-size:2rem;

}

p{

font-size:1rem;

color:var(--muted);

}

/*=========================================
BUTTONS
==========================================*/

.primary-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

background:var(--gold);

color:white;

border-radius:100px;

font-weight:600;

transition:var(--transition);

}

.primary-button:hover{

background:#8D6A31;

transform:translateY(-3px);

}

.secondary-button{

display:inline-flex;

padding:16px 34px;

border:1px solid var(--gold);

border-radius:100px;

transition:var(--transition);

}

.secondary-button:hover{

background:var(--gold);

color:white;

}

/*=========================================
NAVIGATION
==========================================*/

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

padding:20px 0;

background:rgba(248,245,240,.82);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(0,0,0,.05);

transition:var(--transition);

}

.nav-container{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo img{

height:60px;

}

.desktop-nav ul{

display:flex;

gap:42px;

align-items:center;

}

.desktop-nav a{

font-size:.95rem;

font-weight:500;

position:relative;

}

.desktop-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

.desktop-nav a:hover::after{

width:100%;

}

/*=========================================
HAMBURGER
==========================================*/

.menu-btn{

display:none;

background:none;

border:none;

cursor:pointer;

width:42px;

height:42px;

position:relative;

}

.menu-btn span{

position:absolute;

left:0;

width:100%;

height:2px;

background:#222;

transition:.35s;

}

.menu-btn span:nth-child(1){

top:10px;

}

.menu-btn span:nth-child(2){

top:20px;

}

.menu-btn span:nth-child(3){

top:30px;

}

/*=========================================
MOBILE MENU
==========================================*/

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:100%;

height:100vh;

background:rgba(248,245,240,.98);

backdrop-filter:blur(40px);

display:flex;

align-items:center;

justify-content:center;

transition:.6s ease;

z-index:999;

}

.mobile-menu.active{

right:0;

}

.mobile-menu nav{

display:flex;

flex-direction:column;

gap:28px;

text-align:center;

}

.mobile-menu a{

font-family:"Cormorant Garamond",serif;

font-size:2.2rem;

}
/*=========================================
HERO
==========================================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:180px 0 120px;

overflow:hidden;

background:
linear-gradient(
180deg,
rgba(248,245,240,.96),
rgba(248,245,240,.98)
),
url("assets/images/hero/hero.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,
rgba(176,138,69,.12),
transparent 45%),

radial-gradient(circle at bottom left,
rgba(176,138,69,.08),
transparent 40%);

pointer-events:none;

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
180deg,
rgba(255,255,255,.08),
rgba(255,255,255,.65)
);

}

.hero-container{

position:relative;

z-index:2;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}

.hero-content{

max-width:900px;

margin:auto;

}

.hero-overline{

letter-spacing:6px;

text-transform:uppercase;

font-size:.9rem;

color:var(--gold);

margin-bottom:26px;

font-weight:600;

}

.hero h1{

margin-bottom:34px;

max-width:900px;

margin-left:auto;

margin-right:auto;

}

.hero-description{

max-width:700px;

margin:auto;

font-size:1.12rem;

line-height:2;

margin-bottom:50px;

color:#666;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:22px;

flex-wrap:wrap;

}

.scroll-indicator{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

font-size:.75rem;

letter-spacing:4px;

color:var(--gold);

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

animation:float 2.5s infinite;

}

.scroll-indicator::after{

content:"";

width:1px;

height:45px;

background:var(--gold);

opacity:.6;

}

@keyframes float{

0%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,10px);

}

100%{

transform:translate(-50%,0);

}

}

/*=========================================
SECTION INTRO
==========================================*/

section{

padding:140px 0;

position:relative;

}

.section-intro{

text-align:center;

margin-bottom:60px;

}

.section-intro span{

display:inline-block;

font-size:.8rem;

letter-spacing:5px;

color:var(--gold);

margin-bottom:16px;

text-transform:uppercase;

font-weight:600;

}

.section-intro h2{

margin-bottom:20px;

}

.section-copy{

max-width:760px;

margin:auto;

text-align:center;

font-size:1.05rem;

line-height:2;

}
/*=========================================
THE HOUSE
==========================================*/

.house-section{

background:#FCFAF7;

}

.house-copy{

max-width:900px;

margin:0 auto 80px;

text-align:center;

font-size:1.12rem;

line-height:2.1;

}

.house-values{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.value-card{

background:#fff;

padding:55px 40px;

border-radius:24px;

border:1px solid var(--border);

transition:var(--transition);

box-shadow:0 15px 50px rgba(0,0,0,.04);

text-align:center;

}

.value-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 80px rgba(0,0,0,.08);

}

.value-card h3{

margin-bottom:18px;

color:var(--gold);

}

/*=========================================
ARTISANS
==========================================*/

.artisans-section{

background:#F7F3EC;

}

.artisan-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

margin-top:70px;

}

.artisan-card{

background:white;

border-radius:28px;

overflow:hidden;

transition:.45s;

box-shadow:0 20px 60px rgba(0,0,0,.05);

}

.artisan-card:hover{

transform:translateY(-14px);

}

.artisan-image{

height:360px;

overflow:hidden;

}

.artisan-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.8s;

}

.artisan-card:hover img{

transform:scale(1.08);

}

.artisan-card h3{

padding:28px 30px 10px;

}

.artisan-title{

padding:0 30px;

color:var(--gold);

font-weight:600;

margin-bottom:16px;

}

.artisan-card p{

padding:0 30px;

}

.artisan-card a{

display:inline-block;

padding:30px;

font-weight:600;

color:var(--gold);

}

/*=========================================
CRAFT TIMELINE
==========================================*/

.craft-section{

background:#fff;

}

.timeline{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:70px;

}

.timeline-item{

text-align:center;

padding:45px 30px;

border:1px solid var(--border);

border-radius:22px;

transition:.45s;

}

.timeline-item:hover{

background:var(--gold);

color:white;

transform:translateY(-10px);

}

.timeline-item:hover p{

color:white;

}

.timeline-item span{

font-size:3rem;

font-family:"Cormorant Garamond",serif;

color:var(--gold);

display:block;

margin-bottom:15px;

}

.timeline-item:hover span{

color:white;

}

/*=========================================
COLLECTIONS
==========================================*/

.collections-section{

background:#FCFAF7;

}

.collection-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:70px;

}

.collection-card{

min-height:420px;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:45px;

border-radius:28px;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.7)

),

url("assets/images/collections/placeholder.jpg");

background-size:cover;

background-position:center;

color:white;

overflow:hidden;

transition:.45s;

}

.collection-card:hover{

transform:scale(1.03);

}

.collection-card h3{

font-size:2.3rem;

margin-bottom:10px;

}

.collection-card p{

color:#eee;

}
/*=========================================
JOURNAL
==========================================*/

.journal-section{

background:#ffffff;

}

.journal-section .section-copy{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.journal-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.journal-card{

background:#fff;

border:1px solid var(--border);

border-radius:24px;

overflow:hidden;

transition:var(--transition);

box-shadow:0 12px 35px rgba(0,0,0,.04);

}

.journal-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.journal-card img{

width:100%;

height:260px;

object-fit:cover;

}

.journal-content{

padding:30px;

}

.journal-content h3{

margin-bottom:16px;

}

.journal-content a{

display:inline-block;

margin-top:20px;

color:var(--gold);

font-weight:600;

}

/*=========================================
FOUNDER
==========================================*/

.founder-section{

background:#F8F5F0;

}

.founder-wrapper{

max-width:900px;

margin:auto;

text-align:center;

background:white;

padding:80px;

border-radius:28px;

border:1px solid var(--border);

box-shadow:0 20px 60

box-shadow:0 20px 60px rgba(0,0,0,.06);

}

.founder-wrapper p{

font-size:1.12rem;

line-height:2.2;

margin-bottom:40px;

color:#555;

}

.founder-wrapper h3{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

color:var(--gold);

font-weight:600;

line-height:1.6;

}

/*=========================================
NEWSLETTER
==========================================*/

.newsletter-section{

background:#181818;

color:white;

text-align:center;

}

.newsletter-section h2{

color:white;

margin-bottom:20px;

}

.newsletter-section p{

max-width:680px;

margin:0 auto 50px;

color:rgba(255,255,255,.75);

}

.newsletter-form{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.newsletter-form input{

width:420px;

max-width:100%;

padding:18px 24px;

border:none;

border-radius:100px;

outline:none;

font-size:1rem;

}

.newsletter-form button{

cursor:pointer;

border:none;

}

/*=========================================
FOOTER
==========================================*/

.footer{

background:#111;

color:white;

padding:90px 0 40px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:70px;

margin-bottom:60px;

}

.footer-logo{

height:70px;

margin-bottom:25px;

}

.footer h4{

font-family:"Cormorant Garamond",serif;

font-size:1.5rem;

margin-bottom:24px;

color:white;

}

.footer a{

display:block;

margin-bottom:16px;

color:rgba(255,255,255,.75);

transition:.3s;

}

.footer a:hover{

color:var(--gold-light);

padding-left:6px;

}

.footer p{

color:rgba(255,255,255,.65);

}

.footer-bottom{

padding-top:35px;

border-top:1px solid rgba(255,255,255,.1);

text-align:center;

}

.footer-bottom p{

font-size:.9rem;

letter-spacing:1px;

}
/*=========================================
RESPONSIVE DESIGN
==========================================*/

@media (max-width:1200px){

.hero h1{

font-size:5rem;

}

.house-values,
.artisan-grid,
.collection-grid{

grid-template-columns:repeat(2,1fr);

}

.timeline{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media (max-width:992px){

.desktop-nav{

display:none;

}

.menu-btn{

display:block;

z-index:1001;

}

.hero{

padding:160px 0 100px;

}

.hero h1{

font-size:4.2rem;

}

.hero-description{

font-size:1rem;

max-width:600px;

}

.founder-wrapper{

padding:60px 40px;

}

}

@media (max-width:768px){

section{

padding:90px 0;

}

.container{

width:92%;

}

.hero{

min-height:100svh;

padding:140px 0 80px;

}

.hero h1{

font-size:3rem;

line-height:1.1;

}

.hero-overline{

letter-spacing:3px;

font-size:.75rem;

}

.hero-description{

font-size:.95rem;

line-height:1.9;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.primary-button,
.secondary-button{

width:100%;

max-width:320px;

}

.house-values,
.artisan-grid,
.collection-grid,
.timeline,
.journal-grid,
.footer-grid{

grid-template-columns:1fr;

}

.value-card,
.timeline-item,
.collection-card{

padding:35px;

}

.collection-card{

min-height:340px;

}

.artisan-image{

height:300px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.founder-wrapper{

padding:45px 28px;

}

.footer{

text-align:center;

}

.footer-logo{

margin:auto auto 20px;

}

}

@media (max-width:480px){

.logo img{

height:46px;

}

.hero h1{

font-size:2.35rem;

}

h2{

font-size:2.2rem;

}

.section-intro span{

letter-spacing:2px;

}

.founder-wrapper{

padding:35px 22px;

}

}

/*=========================================
LUXURY ANIMATIONS
==========================================*/

.fade-up{

opacity:0;

transform:translateY(50px);

transition:all .9s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.scale-in{

opacity:0;

transform:scale(.95);

transition:all .8s ease;

}

.scale-in.show{

opacity:1;

transform:scale(1);

}

.gold-hover{

transition:.4s;

}

.gold-hover:hover{

color:var(--gold);

}

/*=========================================
CUSTOM SCROLLBAR
==========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f2efe9;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#8D6A31;

}

/*=========================================
SELECTION
==========================================*/

::selection{

background:var(--gold);

color:white;

}

/*=========================================
END OF STYLESHEET
==========================================*/

/*==============================
LUXURY FOOTER
==============================*/

.footer{

background:#0f0f0f;

padding:90px 0 35px;

color:#f6f2eb;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

}

.footer-logo{

width:90px;

margin-bottom:20px;

transition:.4s;

}

.footer-logo:hover{

transform:scale(1.08);

}

.footer-brand h2{

font-size:2.1rem;

letter-spacing:5px;

margin-bottom:18px;

}

.footer-brand p{

line-height:1.8;

color:#d0c8bc;

max-width:340px;

}

.heritage-seal{

display:inline-block;

margin-top:25px;

padding:10px 20px;

border:1px solid #b88a45;

border-radius:40px;

color:#b88a45;

font-size:.9rem;

}

.footer-column{

display:flex;

flex-direction:column;

}

.footer-column h3{

margin-bottom:18px;

color:#b88a45;

letter-spacing:2px;

text-transform:uppercase;

font-size:.95rem;

}

.footer-column a{

color:#ece7de;

text-decoration:none;

margin:8px 0;

transition:.35s;

}

.footer-column a:hover{

color:#b88a45;

padding-left:8px;

}

.newsletter{

margin-top:80px;

text-align:center;

}

.newsletter h3{

font-size:2rem;

margin-bottom:12px;

}

.newsletter p{

max-width:650px;

margin:auto;

line-height:1.8;

color:#cfc8bc;

}

.newsletter-form{

margin-top:30px;

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

}

.newsletter-form input{

padding:15px 20px;

width:320px;

border:none;

outline:none;

background:#1c1c1c;

color:white;

}

.newsletter-form button{

padding:15px 32px;

background:#b88a45;

border:none;

cursor:pointer;

font-weight:600;

transition:.35s;

}

.newsletter-form button:hover{

background:#d5aa5d;

}

.footer-divider{

margin:70px 0 30px;

border:none;

border-top:1px solid rgba(255,255,255,.12);

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

}

.back-to-top{

width:46px;

height:46px;

border-radius:50%;

border:none;

background:#b88a45;

color:white;

cursor:pointer;

font-size:20px;

transition:.35s;

}

.back-to-top:hover{

transform:translateY(-6px);

}

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-column{

align-items:center;

}

.footer-brand p{

margin:auto;

}

.footer-bottom{

justify-content:center;

gap:25px;

}

}

/*==================================================
SIGNATURE CRAFTS
==================================================*/

.signature-crafts{

padding:120px 8%;

background:#faf8f4;

}

.section-heading{

text-align:center;

max-width:760px;

margin:0 auto 90px;

}

.section-heading .eyebrow{

display:inline-block;

letter-spacing:4px;

font-size:.85rem;

color:#b88a45;

text-transform:uppercase;

margin-bottom:15px;

}

.section-heading h2{

font-size:3.2rem;

margin-bottom:25px;

font-family:"Cormorant Garamond",serif;

color:#151515;

}

.section-heading p{

font-size:1.05rem;

line-height:1.9;

color:#666;

}

.craft-row{

display:grid;

grid-template-columns:1.15fr 1fr;

gap:70px;

align-items:center;

margin-bottom:120px;

}

.craft-row.reverse{

grid-template-columns:1fr 1.15fr;

}

.craft-row.reverse .craft-image{

order:2;

}

.craft-row.reverse .craft-content{

order:1;

}

.craft-image{

overflow:hidden;

border-radius:18px;

box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.craft-image img{

width:100%;

display:block;

transition:.8s ease;

}

.craft-image:hover img{

transform:scale(1.06);

}

.craft-content span{

display:block;

margin-bottom:12px;

font-size:.85rem;

letter-spacing:3px;

text-transform:uppercase;

color:#b88a45;

}

.craft-content h3{

font-size:2.5rem;

margin-bottom:22px;

font-family:"Cormorant Garamond",serif;

color:#181818;

}

.craft-content p{

line-height:2;

color:#666;

margin-bottom:35px;

font-size:1rem;

}

.craft-btn{

display:inline-block;

padding:15px 32px;

background:#111;

color:white;

text-decoration:none;

border-radius:40px;

transition:.35s;

letter-spacing:1px;

}

.craft-btn:hover{

background:#b88a45;

transform:translateY(-3px);

}

@media(max-width:1000px){

.craft-row,

.craft-row.reverse{

grid-template-columns:1fr;

}

.craft-row.reverse .craft-image,

.craft-row.reverse .craft-content{

order:unset;

}

.craft-content{

text-align:center;

}

}

@media(max-width:768px){

.signature-crafts{

padding:90px 24px;

}

.section-heading h2{

font-size:2.3rem;

}

.craft-content h3{

font-size:2rem;

}

.craft-row{

gap:40px;

margin-bottom:80px;

}

}

/*=========================================
CRAFT ANIMATION
=========================================*/

.craft-row{

opacity:0;

transform:translateY(80px);

transition:all 1s ease;

}

.craft-row.show-craft{

opacity:1;

transform:translateY(0);

}

/*=========================================
COLLECTIONS PAGE
=========================================*/

.collections-hero{

height:75vh;

display:flex;

justify-content:center;

align-items:center;

position:relative;

background:url("assets/images/collections-banner.jpg") center/cover no-repeat;

overflow:hidden;

}

.collections-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

}

.collections-content{

position:relative;

z-index:2;

text-align:center;

color:white;

padding:20px;

}

.collections-content span{

letter-spacing:4px;

font-size:.9rem;

text-transform:uppercase;

color:#d8b36a;

}

.collections-content h1{

font-size:4rem;

margin:20px 0;

font-family:"Cormorant Garamond",serif;

}

.collections-content p{

max-width:700px;

margin:auto;

line-height:1.8;

font-size:1.05rem;

}

.collections-grid{

padding:120px 8%;

background:#faf8f4;

}

.collection-cards{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:50px;

margin-top:70px;

}

.collection-card{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:0 18px 45px rgba(0,0,0,.08);

transition:.4s ease;

}

.collection-card:hover{

transform:translateY(-10px);

}

.collection-card img{

width:100%;

height:420px;

object-fit:cover;

transition:.6s;

}

.collection-card:hover img{

transform:scale(1.05);

}

.collection-info{

padding:35px;

}

.collection-info span{

display:block;

letter-spacing:3px;

text-transform:uppercase;

font-size:.8rem;

color:#b88a45;

margin-bottom:10px;

}

.collection-info h3{

font-size:2rem;

font-family:"Cormorant Garamond",serif;

margin-bottom:18px;

color:#151515;

}

.collection-info p{

line-height:1.8;

color:#666;

margin-bottom:25px;

}

.collection-info a{

text-decoration:none;

color:#b88a45;

font-weight:600;

transition:.3s;

}

.collection-info a:hover{

padding-left:8px;

}

@media(max-width:900px){

.collection-cards{

grid-template-columns:1fr;

}

.collections-content h1{

font-size:2.8rem;

}

.collection-card img{

height:320px;

}

}

@media(max-width:768px){

.collections-grid{

padding:90px 24px;

}

.collections-hero{

height:60vh;

}

.collections-content h1{

font-size:2.3rem;

}

}

/*=========================================
COLLECTION CARD ANIMATION
=========================================*/

.collection-card{

opacity:1;

transform:none;

transition:transform 0.35s ease, box-shadow 0.35s ease;

}

/*=========================================
ABOUT PAGE
=========================================*/

.about-hero{

height:90vh;

background:url("assets/backgrounds/about-hero.jpg") center/cover no-repeat;

position:relative;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.about-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}

.about-content{

position:relative;

z-index:2;

text-align:center;

max-width:900px;

padding:20px;

color:#fff;

}

.about-content span{

display:block;

letter-spacing:5px;

text-transform:uppercase;

font-size:.9rem;

color:#d8b36a;

margin-bottom:20px;

}

.about-content h1{

font-family:"Cormorant Garamond",serif;

font-size:4.5rem;

font-weight:600;

line-height:1.15;

margin-bottom:30px;

}

.about-content p{

font-size:1.15rem;

line-height:2;

max-width:700px;

margin:auto;

opacity:.92;

}

/*=========================================
HOUSE INTRO
=========================================*/

.house-intro{

padding:120px 10%;

display:grid;

grid-template-columns:1fr 2fr;

gap:80px;

background:#faf8f4;

align-items:start;

}

.house-left h2{

font-family:"Cormorant Garamond",serif;

font-size:3.5rem;

color:#1c1c1c;

position:sticky;

top:120px;

}

.house-right p{

font-size:1.08rem;

line-height:2;

margin-bottom:30px;

color:#555;

}

/*=========================================
FOUNDER STORY
=========================================*/

.founder-story{

padding:120px 10%;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

background:#ffffff;

}

.founder-image img{

width:100%;

border-radius:8px;

display:block;

box-shadow:0 30px 70px rgba(0,0,0,.12);

transition:.5s;

}

.founder-image img:hover{

transform:scale(1.02);

}

.eyebrow{

display:inline-block;

letter-spacing:4px;

text-transform:uppercase;

font-size:.85rem;

color:#b78a3f;

margin-bottom:20px;

}

.founder-content h2{

font-family:"Cormorant Garamond",serif;

font-size:3.4rem;

line-height:1.2;

margin-bottom:30px;

color:#222;

}

.founder-content p{

font-size:1.05rem;

line-height:2;

color:#555;

margin-bottom:25px;

}

/*=========================================
PHILOSOPHY
=========================================*/

.philosophy{

padding:120px 10%;

background:#f8f6f2;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading h2{

font-family:"Cormorant Garamond",serif;

font-size:3.6rem;

line-height:1.2;

color:#222;

margin-top:20px;

}

.philosophy-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

}

.philosophy-card{

background:white;

padding:40px;

border-radius:10px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.06);

transition:.4s;

}

.philosophy-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.philosophy-card img{

width:100%;

height:240px;

object-fit:cover;

border-radius:8px;

margin-bottom:25px;

}

.philosophy-card h3{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

margin-bottom:18px;

color:#222;

}

.philosophy-card p{

line-height:1.9;

font-size:1rem;

color:#666;

}

/*=========================================
ABOUT PAGE RESPONSIVE
=========================================*/

@media (max-width:1100px){

.house-intro{

grid-template-columns:1fr;

gap:40px;

}

.house-left h2{

position:static;

}

.founder-story{

grid-template-columns:1fr;

gap:50px;

}

.philosophy-grid{

grid-template-columns:1fr;

}

}

@media (max-width:768px){

.about-hero{

height:70vh;

padding:30px;

}

.about-content h1{

font-size:2.8rem;

}

.about-content p{

font-size:1rem;

line-height:1.8;

}

.house-intro{

padding:80px 30px;

}

.house-left h2{

font-size:2.5rem;

}

.founder-story{

padding:80px 30px;

}

.founder-content h2{

font-size:2.5rem;

}

.philosophy{

padding:80px 30px;

}

.section-heading h2{

font-size:2.5rem;

}

.philosophy-card{

padding:30px;

}

.philosophy-card img{

height:220px;

}

}

/*=========================================
LUXURY ANIMATIONS
=========================================*/

.house-intro,
.founder-story,
.philosophy{

animation:fadeUp 1.2s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*==================================================
CRAFTSMANSHIP PAGE
==================================================*/

.craft-hero{
height:90vh;
background:url("assets/backgrounds/craft-hero.jpg") center/cover no-repeat;
position:relative;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
overflow:hidden;
}

.craft-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
}

.craft-content{
position:relative;
z-index:2;
color:white;
max-width:850px;
padding:20px;
}

.craft-content span{

display:block;

letter-spacing:5px;

text-transform:uppercase;

color:#D6B16E;

margin-bottom:20px;

font-size:.9rem;

}

.craft-content h1{

font-family:"Cormorant Garamond",serif;

font-size:4.8rem;

font-weight:600;

margin-bottom:30px;

line-height:1.1;

}

.craft-content p{

font-size:1.15rem;

line-height:2;

opacity:.9;

}



/*==================================================
INTRO
==================================================*/

.craft-intro{

display:grid;

grid-template-columns:1fr 2fr;

gap:90px;

padding:130px 10%;

background:#faf8f4;

}

.craft-left h2{

font-family:"Cormorant Garamond",serif;

font-size:3.7rem;

color:#1c1c1c;

}

.craft-right p{

font-size:1.08rem;

line-height:2;

margin-bottom:28px;

color:#555;

}



/*==================================================
CRAFT BLOCKS
==================================================*/

.craft-block{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

padding:130px 10%;

background:white;

}

.craft-block.reverse{

direction:rtl;

}

.craft-block.reverse>*{

direction:ltr;

}

.craft-image img{

width:100%;

border-radius:10px;

display:block;

box-shadow:0 25px 60px rgba(0,0,0,.12);

transition:.6s;

}

.craft-image img:hover{

transform:scale(1.03);

}

.craft-text h2{

font-family:"Cormorant Garamond",serif;

font-size:3.3rem;

line-height:1.2;

margin-bottom:25px;

color:#222;

}

.craft-text p{

line-height:2;

font-size:1.05rem;

color:#666;

}

/*==================================================
ARTISAN SECTION
==================================================*/

.artisan-section{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

padding:130px 10%;

background:#f8f6f2;

align-items:center;

}

.artisan-image img{

width:100%;

border-radius:10px;

display:block;

box-shadow:0 25px 60px rgba(0,0,0,.12);

transition:.5s;

}

.artisan-image img:hover{

transform:scale(1.03);

}

.artisan-content h2{

font-family:"Cormorant Garamond",serif;

font-size:3.3rem;

margin-bottom:25px;

color:#222;

line-height:1.2;

}

.artisan-content p{

font-size:1.05rem;

line-height:2;

color:#666;

}



/*==================================================
LUXURY ANIMATIONS
==================================================*/

.craft-block,
.artisan-section,
.craft-intro{

animation:fadeCraft 1.2s ease;

}

@keyframes fadeCraft{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1100px){

.craft-intro{

grid-template-columns:1fr;

gap:40px;

}

.craft-block{

grid-template-columns:1fr;

}

.craft-block.reverse{

direction:ltr;

}

.artisan-section{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.craft-hero{

height:70vh;

}

.craft-content h1{

font-size:2.8rem;

}

.craft-intro,
.craft-block,
.artisan-section{

padding:80px 30px;

}

.craft-left h2,
.craft-text h2,
.artisan-content h2{

font-size:2.5rem;

}

}

/*=========================================
AAMKARI PRELOADER
=========================================*/

#preloader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#F8F5EF;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:opacity 1s ease, visibility 1s ease;

}

#preloader.hide{

opacity:0;

visibility:hidden;

pointer-events:none;

}

.loader-content{

text-align:center;

animation:loaderFade 2s ease;

}

.loader-logo{

width:260px;

height:auto;

margin-bottom:35px;

animation:logoFloat 2.8s ease-in-out infinite alternate;

}

.loader-content h2{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

font-weight:600;

letter-spacing:4px;

color:#1f1f1f;

margin-bottom:18px;

}

.loader-content p{

font-family:"Inter",sans-serif;

font-size:0.95rem;

letter-spacing:2px;

text-transform:uppercase;

color:#B68A3F;

}

/* Elegant fade */

@keyframes loaderFade{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* Gentle breathing animation */

@keyframes logoFloat{

0%{

transform:scale(.96);

opacity:.92;

}

100%{

transform:scale(1);

opacity:1;

}

}

/* Mobile */

@media(max-width:768px){

.loader-logo{

width:100px;

}

.loader-content h2{

font-size:1.35rem;

letter-spacing:2px;

}

.loader-content p{

font-size:.75rem;

letter-spacing:1px;

}

}

.product-page{

display:flex;

padding:120px 8%;

gap:80px;

align-items:flex-start;

background:#faf8f3;

}

.product-gallery{

flex:1;

}

.main-image img{

width:100%;

border-radius:18px;

}

.thumbnail-gallery{

display:flex;

gap:15px;

margin-top:20px;

}

.thumbnail-gallery img{

width:90px;

height:120px;

object-fit:cover;

cursor:pointer;

border-radius:12px;

transition:.35s;

}

.thumbnail-gallery img:hover{

transform:scale(1.08);

}

.product-info{

flex:1;

}

.collection-label{

letter-spacing:4px;

font-size:12px;

color:#8b7355;

margin-bottom:10px;

}

.product-info h1{

font-size:60px;

margin-bottom:10px;

}

.product-info h2{

font-size:22px;

font-weight:400;

margin-bottom:20px;

}

.price{

font-size:32px;

margin-bottom:30px;

}

.story{

line-height:1.9;

margin-bottom:40px;

max-width:520px;

}

.sizes button,

.lengths button{

padding:12px 22px;

margin:8px;

background:white;

border:1px solid #ddd;

cursor:pointer;

transition:.3s;

}

.sizes button:hover,

.lengths button:hover{

background:#111;

color:white;

}

.add-cart{

margin-top:40px;

padding:18px 40px;

background:#111;

color:white;

border:none;

font-size:16px;

cursor:pointer;

letter-spacing:2px;

}

.product-story{

padding:140px 10%;

background:white;

text-align:center;

}

.story-container{

max-width:850px;

margin:auto;

}

.story-label{

letter-spacing:5px;

font-size:12px;

color:#a88b5b;

margin-bottom:20px;

}

.product-story h2{

font-size:56px;

margin-bottom:30px;

}

.product-story p{

font-size:20px;

line-height:2;

color:#444;

}



.fabric-section{

display:flex;

align-items:center;

gap:80px;

padding:120px 10%;

background:#faf8f3;

}

.fabric-left{

flex:1;

}

.fabric-left img{

width:100%;

border-radius:20px;

}

.fabric-right{

flex:1;

}

.fabric-right h2{

font-size:44px;

margin-bottom:25px;

}

.fabric-right p{

line-height:2;

font-size:18px;

}

.journey-section{

padding:140px 10%;

background:#faf8f3;

}

.journey-heading{

text-align:center;

max-width:700px;

margin:auto;

margin-bottom:90px;

}

.journey-heading h2{

font-size:54px;

margin:20px 0;

}

.journey-heading p{

line-height:1.9;

}

.journey-timeline{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:35px;

}

.journey-step{

background:white;

padding:40px;

border-radius:18px;

transition:.35s;

}

.journey-step:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.step-number{

font-size:14px;

letter-spacing:3px;

color:#b08d57;

margin-bottom:20px;

}

.journey-step h3{

margin-bottom:18px;

font-size:24px;

}

.journey-step p{

line-height:1.8;

color:#555;

}

.size-btn.active,
.length-btn.active{

background:#111;

color:white;

border-color:#111;

}

.instagram-section{
   padding:120px 10%;
   background:#f8f5ef;
   text-align:center;
}

.instagram-section h5{
   letter-spacing:4px;
   text-transform:uppercase;
   font-size:12px;
   color:#8a7b5d;
   margin-bottom:20px;
}

.instagram-section h2{
   font-size:48px;
   margin-bottom:30px;
   font-weight:300;
}

.instagram-section p{
   max-width:700px;
   margin:0 auto 40px;
   line-height:1.9;
   color:#555;
   font-size:18px;
}

.instagram-button{
   display:inline-block;
   padding:16px 36px;
   border:1px solid #111;
   text-decoration:none;
   color:#111;
   transition:.3s;
}

.instagram-button:hover{
   background:#111;
   color:#fff;
}

.contact-page{
   padding:140px 10%;
   background:#faf8f3;
   min-height:100vh;
}

.contact-hero{
   max-width:700px;
   margin:auto;
   text-align:center;
}

.contact-hero h1{
   font-size:64px;
   margin:20px 0 30px;
}

.contact-text{
   font-size:18px;
   line-height:1.9;
   color:#666;
   margin-bottom:60px;
}

.contact-details{
   margin-bottom:50px;
}

.contact-details p{
   margin-bottom:30px;
   line-height:1.8;
}

.story-label{
   letter-spacing:4px;
   font-size:12px;
   text-transform:uppercase;
   color:#8a7b5d;
}

/* ===========================
  CONTACT
=========================== */

.contact-page{
   background:#FAF8F3;
   min-height:100vh;
   padding:180px 8% 120px;
}

.contact-hero{
   max-width:760px;
   margin:auto;
   text-align:center;
}

.story-label{
   font-size:13px;
   letter-spacing:6px;
   color:#A78954;
   margin-bottom:25px;
}

.contact-hero h1{
   font-family:"Cormorant Garamond",serif;
   font-size:68px;
   font-weight:400;
   line-height:1.05;
   color:#1D1D1D;
   margin-bottom:40px;
}

.contact-text{
   font-size:19px;
   line-height:2;
   color:#6A6A6A;
   margin-bottom:70px;
}

.contact-details{
   display:flex;
   justify-content:center;
   gap:90px;
   margin-bottom:70px;
}

.contact-item h3{
   font-size:14px;
   letter-spacing:4px;
   margin-bottom:12px;
   color:#A78954;
}

.contact-item p{
   font-size:18px;
   color:#222;
}

.instagram-contact-btn{

display:inline-block;

padding:18px 48px;

border:1px solid #111;

text-decoration:none;

color:#111;

transition:.35s;

font-size:15px;

letter-spacing:2px;

}

.instagram-contact-btn:hover{

background:#111;

color:white;

}

.contact-note{

margin-top:45px;

color:#888;

font-size:15px;

line-height:1.8;

}

@media(max-width:768px){

.contact-page{

padding:130px 8% 80px;

}

.contact-hero h1{

font-size:44px;

}

.contact-details{

flex-direction:column;

gap:35px;

}

.contact-text{

font-size:17px;

}

.instagram-contact-btn{

width:100%;

text-align:center;

}

}


/* ===========================
  Footer Journey
=========================== */

.footer-journey{

margin-top:70px;

padding-top:55px;

border-top:1px solid rgba(0,0,0,.08);

text-align:center;

}

.footer-journey h3{

font-family:"Cormorant Garamond",serif;

font-size:34px;

font-weight:400;

margin-bottom:18px;

}

.footer-journey p{

max-width:650px;

margin:auto;

line-height:1.9;

color:#777;

margin-bottom:35px;

}

.footer-instagram-btn{

display:inline-block;

padding:16px 42px;

border:1px solid #111;

text-decoration:none;

color:#111;

letter-spacing:2px;

transition:.35s;

}

.footer-instagram-btn:hover{

background:#111;

color:white;

}

.footer-column p{
   margin:12px 0;
   color:#777;
   font-size:15px;
   line-height:1.8;
}

/* ===========================
Crafts Page
=========================== */

.craft-page{

background:#faf8f3;

padding:150px 10%;

}

.craft-hero{

max-width:900px;

margin:auto;

text-align:center;

margin-bottom:120px;

}

.craft-hero h1{

font-family:"Cormorant Garamond",serif;

font-size:68px;

font-weight:400;

margin:20px 0;

}

.craft-intro{

font-size:18px;

line-height:2;

color:#777;

}

.craft-block{

max-width:900px;

margin:90px auto;

}

.craft-block h2{

font-family:"Cormorant Garamond",serif;

font-size:42px;

margin-bottom:20px;

}

.craft-block p{

font-size:18px;

line-height:2;

color:#666;

}

@media (max-width:768px){

.craft-hero{

display:block;

text-align:center;

max-width:100%;

margin-bottom:60px;

}

.craft-hero h1{

font-size:40px;

line-height:1.2;

margin:20px 0;

}

.craft-intro{

font-size:16px;

line-height:1.8;

max-width:100%;

margin:0 auto;

}

.story-label{

display:block;

text-align:center;

margin-bottom:12px;

}

.craft-block{

margin:60px auto;

}

.craft-block h2{

font-size:32px;

}

.craft-block p{

font-size:16px;

line-height:1.8;

}

}




.journal-page{
background:#faf8f3;
padding:140px 10% 80px;
}

.journal-hero{
text-align:center;
max-width:850px;
margin:0 auto 90px;
}

.journal-hero h1{
font-size:52px;
font-family:"Cormorant Garamond",serif;
margin-bottom:20px;
}

.journal-intro{
font-size:18px;
line-height:1.8;
color:#666;
}

.journal-story{
max-width:900px;
margin:0 auto 100px;
padding-bottom:60px;
border-bottom:1px solid #ddd;
}

.chapter{
letter-spacing:4px;
text-transform:uppercase;
font-size:12px;
color:#b08d57;
margin-bottom:18px;
}

.journal-story h2{
font-size:42px;
font-family:"Cormorant Garamond",serif;
margin-bottom:8px;
}

.journal-story h3{
color:#b08d57;
margin-bottom:28px;
font-size:20px;
font-weight:500;
}

.journal-story p{
font-size:18px;
line-height:2;
color:#555;
}

@media(max-width:768px){

.journal-page{
padding:120px 24px 60px;
}

.journal-hero h1{
font-size:36px;
}

.journal-story h2{
font-size:32px;
}

.journal-story p{
font-size:16px;
line-height:1.9;
}

}
/* ---------- THE HANDS ---------- */

.section-header{
text-align:center;
max-width:750px;
margin:0 auto 80px;
}

.story-label{
letter-spacing:4px;
font-size:12px;
color:#b08d57;
margin-bottom:18px;
text-transform:uppercase;
}

.section-header h2{
font-size:54px;
font-family:"Cormorant Garamond",serif;
margin-bottom:22px;
}

.section-intro{
font-size:18px;
line-height:1.8;
color:#666;
}

.artisan-feature{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
margin-bottom:80px;
}

.artisan-feature img{
width:100%;
border-radius:18px;
}

.artisan-content span{
color:#b08d57;
letter-spacing:2px;
font-size:13px;
text-transform:uppercase;
}

.artisan-content h3{
font-size:42px;
margin:18px 0;
font-family:"Cormorant Garamond",serif;
}

.artisan-content p{
line-height:1.9;
color:#666;
margin-bottom:20px;
}

.artisan-content small{
color:#999;
letter-spacing:2px;
}

.artisan-divider{
margin:80px 0;
border:none;
border-top:1px solid #eee;
}

.artisan-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.artisan-card{
padding:40px;
border:1px solid #eee;
border-radius:18px;
background:#fff;
transition:.3s;
}

.artisan-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,.06);
}

.artisan-card h4{
font-size:28px;
font-family:"Cormorant Garamond",serif;
margin-bottom:15px;
}

.artisan-card p{
color:#666;
margin-bottom:25px;
}

.artisan-card span{
color:#b08d57;
font-size:13px;
letter-spacing:2px;
text-transform:uppercase;
}

@media(max-width:900px){

.artisan-feature{
grid-template-columns:1fr;
}

.section-header h2{
font-size:40px;
}

.artisan-grid{
grid-template-columns:1fr;
}

}

/* ==========================
  THE HANDS BEHIND AAMKARI
========================== */

.hands-grid{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:40px;
   margin-top:70px;
}

.hand-card{
   background:#ffffff;
   border-radius:20px;
   overflow:hidden;
   box-shadow:0 10px 35px rgba(0,0,0,0.06);
   transition:0.35s ease;
}

.hand-card:hover{
   transform:translateY(-8px);
}

.hand-card img{
   width:100%;
   height:300px;
   object-fit:cover;
}

.hand-card h3{
   font-family:"Cormorant Garamond", serif;
   font-size:34px;
   padding:30px 30px 15px;
   color:#1f1f1f;
}

.hand-card p{
   padding:0 30px 35px;
   line-height:1.9;
   color:#666;
   font-size:16px;
}

.hands-quote{
   text-align:center;
   margin:90px auto 20px;
   max-width:750px;
}

.hands-quote p{
   font-family:"Cormorant Garamond", serif;
   font-size:34px;
   line-height:1.6;
   color:#222;
   font-style:italic;
}

/* Mobile */

@media(max-width:900px){

.hands-grid{
   grid-template-columns:1fr;
   gap:35px;
}

.hand-card img{
   height:260px;
}

.hand-card h3{
   font-size:30px;
}

.hands-quote p{
   font-size:28px;
}

}

/* ===== Signature Crafts Buttons ===== */

.chapter-btn{
   display:inline-block;
   padding:14px 28px;
   margin-top:20px;

   background:#111111;
   color:#ffffff !important;

   text-decoration:none;
   border-radius:40px;

   font-size:15px;
   font-weight:600;

   transition:0.3s ease;
}

.chapter-btn:hover{
   background:#b08d57;
   color:#ffffff !important;
}

/* ===== Mobile: Chapter 2 Hero ===== */

@media (max-width:768px){

.hands-section{
   padding:70px 24px 40px;
   text-align:center;
}

.hands-section .story-label{
   letter-spacing:6px;
   font-size:13px;
   margin-bottom:18px;
}

.hands-section h2{
   font-size:42px;
   line-height:1.15;
   max-width:320px;
   margin:0 auto 24px;
}

.hands-section .section-intro{
   max-width:320px;
   margin:0 auto;
   font-size:18px;
   line-height:1.8;
   color:#666;
}
}

.hero{
   position: relative;
   overflow: hidden;
}

.hero-watermark{
   position: absolute;
   top: 0;
   left: 0;

   width: 100%;
   height: 100%;

   object-fit: cover;

   opacity: 0.18;

   z-index: 0;
}

.hero-content{
   position: relative;
   z-index: 2;
}

@media (max-width: 768px) {
   .hero::before {
       background-position: center top;
       background-size: contain;
       opacity: 0.14;
   }
}

/* ===== AAMKARI Timeline Luxury Cards ===== */

.timeline-item{
   position:relative;
   overflow:hidden;

   background-size:cover !important;
   background-position:center !important;
   background-repeat:no-repeat !important;

   background-color:rgba(255,255,255,0.72);
   background-blend-mode:soft-light;

   border-radius:18px;

   transition:0.35s ease;
}

.timeline-item:hover{
   transform:translateY(-6px);
   box-shadow:0 18px 40px rgba(0,0,0,.08);
}


/* ===== House of AAMKARI Watermark Cards ===== */

.value-card{
   position: relative;
   overflow: hidden;

   background-size: cover !important;
   background-position: center !important;
   background-repeat: no-repeat !important;

   background-color: rgba(255,255,255,0.72);
   background-blend-mode:soft-light;

   border-radius: 18px;

   transition: .35s ease;
}

.value-card:hover{
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(0,0,0,.08);
}



/* Fix Read Our Story button */
.hero-actions a{
   display:flex !important;
   align-items:center !important;
   justify-content:center !important;
   text-align:center !important;
}

.hero-actions .btn-outline{
   padding:0 !important;
}