/* ===================================================================
   Glo-Loca — Design System v4
   Palette sampled from brand logo (warm champagne on dark taupe)
   =================================================================== */
:root{
  /* Backgrounds */
  --cream:        #f5ede0;   /* main light bg */
  --cream-alt:    #ece1cd;   /* subtle band */
  --cream-deep:   #e2d3ba;
  --paper:        #fffaf1;

  /* Dark tones (from logo backdrop) */
  --dark:         #2b2418;   /* primary dark */
  --dark-2:       #3d3323;   /* softer dark */
  --dark-3:       #4a3d29;   /* warm taupe */

  /* Champagne / gold accents (from logo mark) */
  --gold:         #a3814f;   /* primary accent */
  --gold-deep:    #7f6132;
  --gold-light:   #c9a978;
  --gold-pale:    #e0c89b;
  --champagne:    #efdcb6;

  /* Ink / text */
  --ink:          #2a2216;
  --text:         #362a1b;
  --muted:        #7a6a57;
  --line:         rgba(163,129,79,0.20);

  /* System */
  --white:        #ffffff;
  --shadow-sm:    0 6px 18px -8px rgba(43,36,24,0.25);
  --shadow:       0 24px 55px -22px rgba(43,36,24,0.38);
  --shadow-lg:    0 40px 90px -30px rgba(43,36,24,0.5);
  --radius:       14px;
  --radius-lg:    26px;
  --container:    1180px;
  --ff-heading:   Georgia, "Times New Roman", serif;
  --ff-body:      -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease:         cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:82px; }
body{
  margin:0; background:var(--cream); color:var(--text);
  font-family:var(--ff-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4{
  font-family:var(--ff-heading); font-weight:700; margin:0 0 14px;
  color:var(--ink); line-height:1.18; letter-spacing:-0.005em;
}
h1{ font-size:clamp(34px, 5.4vw, 58px); letter-spacing:-0.015em; }
h1 em{ color:var(--gold); font-style:italic; }
h2{ font-size:clamp(26px, 3.4vw, 40px); }
h3{ font-size:19px; }
h4{ font-size:15px; }
p{margin:0 0 12px;}

.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:2.8px;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:12px;
}

.section{padding:88px 0;}
.section.alt{background:var(--cream-alt);}
.section.dark{background:var(--dark); color:var(--paper);}
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4{ color:var(--paper); }
.section.dark p{ color:rgba(245,237,224,0.78); }
.section.dark .eyebrow{ color:var(--gold-light); }
.section-head{max-width:700px; margin:0 0 44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head p{ color:var(--muted); font-size:16px; }
.section.dark .section-head p{ color:rgba(245,237,224,0.72); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px;
  border-radius:999px; font-weight:700; font-size:14px; letter-spacing:0.3px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{background:var(--gold); color:var(--white);}
.btn-primary:hover{background:var(--gold-deep); box-shadow:var(--shadow);}
.btn-dark{background:var(--dark); color:var(--paper);}
.btn-dark:hover{background:var(--gold); color:var(--white); box-shadow:var(--shadow);}
.btn-outline{background:transparent; border-color:var(--gold); color:var(--gold-deep);}
.btn-outline:hover{background:var(--gold); color:var(--white); border-color:var(--gold);}
.btn-outline.light{ border-color:var(--gold-light); color:var(--gold-pale); }
.btn-outline.light:hover{ background:var(--gold-light); color:var(--dark); border-color:var(--gold-light); }
.btn-sm{padding:10px 20px; font-size:13px;}
.btn-lg{padding:16px 34px; font-size:15px;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(245,237,224,0.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(163,129,79,0.15);
  transition:box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled{ box-shadow:0 8px 24px -18px rgba(43,36,24,0.3); background:rgba(245,237,224,0.95); }
.header-inner{
  max-width:var(--container); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{
  height:44px; width:44px; object-fit:cover; object-position:center 20%;
  border-radius:50%;
}
.brand-word{font-family:var(--ff-heading); font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-0.005em;}
.brand-word span{color:var(--gold);}
.nav-main{display:flex; align-items:center; gap:28px;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{
  font-size:14.5px; font-weight:600; color:var(--ink);
  position:relative; padding:4px 0; transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active, .nav-links a:hover{ color:var(--gold-deep); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; padding:8px; border-radius:8px;
}
.nav-toggle span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s;}

.mobile-nav{
  position:fixed; inset:0; background:var(--dark); z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transform:translateY(-100%); transition:transform .4s var(--ease); padding:20px;
}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{
  color:var(--paper); font-family:var(--ff-heading); font-size:26px;
  font-weight:700; padding:8px 20px; border-radius:10px;
}
.mobile-nav a:hover{ color:var(--gold-light); }
.mobile-nav-close{
  position:absolute; top:20px; right:22px; background:none; border:none;
  color:var(--paper); cursor:pointer; padding:8px; border-radius:8px;
}
@media (max-width:900px){
  .nav-links, .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}

/* ---------- Hero ---------- */
.hero{
  padding:110px 0 90px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(201,169,120,0.18), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(163,129,79,0.10), transparent 60%),
    var(--cream);
}
.hero-inner{max-width:780px; position:relative; z-index:2;}
.hero h1{ margin-bottom:20px; }
.hero .lead{
  font-size:clamp(16px, 1.5vw, 18.5px); color:var(--muted); max-width:620px;
  margin-bottom:0;
}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-orbit{
  position:absolute; right:-120px; top:50%; transform:translateY(-50%);
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(224,200,155,0.35), rgba(163,129,79,0.08) 60%, transparent 75%);
  filter:blur(2px); pointer-events:none; animation:float 14s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translateY(-50%);} 50%{transform:translateY(-54%);} }

.page-hero{
  background:linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 100%);
  color:var(--paper); padding:90px 0 60px; position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 90% 10%, rgba(201,169,120,0.15), transparent 55%);
  pointer-events:none;
}
.page-hero h1{ color:var(--paper); }
.page-hero p{ color:rgba(245,237,224,0.78); max-width:580px; margin-top:12px; font-size:17px;}
.breadcrumb{margin-top:20px; font-size:13px; color:var(--gold-pale); letter-spacing:0.5px;}
.breadcrumb a{color:var(--gold-pale); font-weight:700;}
.breadcrumb a:hover{ color:var(--champagne); }

/* ---------- Split / Cards ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.split-media .frame{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  background:var(--paper); padding:22px;
}
.split-media img{ width:100%; border-radius:var(--radius); }
.checklist{list-style:none; margin:22px 0; padding:0;}
.checklist li{
  display:flex; gap:12px; align-items:flex-start; margin-bottom:12px;
  font-size:15px; color:var(--text); line-height:1.55;
}
.checklist svg{ flex-shrink:0; color:var(--gold); margin-top:2px; }
.section.dark .checklist li{ color:rgba(245,237,224,0.86); }
.section.dark .checklist svg{ color:var(--gold-light); }
@media(max-width:900px){ .split{grid-template-columns:1fr; gap:36px;} }

.grid{display:grid; gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){ .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;} }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(163,129,79,0.35); }
.section.dark .card{
  background:rgba(255,255,255,0.04); border-color:rgba(201,169,120,0.22);
}
.section.dark .card:hover{
  background:rgba(255,255,255,0.06); border-color:rgba(201,169,120,0.4);
}
.section.dark .card h3, .section.dark .card p{ color:rgba(245,237,224,0.88); }
.icon-badge{
  width:50px; height:50px; border-radius:14px;
  background:linear-gradient(135deg, var(--cream-alt), var(--cream-deep));
  color:var(--gold-deep); display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; transition:transform .3s var(--ease);
}
.card:hover .icon-badge{ transform:rotate(-4deg) scale(1.05); }
.icon-badge.dark{
  background:linear-gradient(135deg, rgba(201,169,120,0.18), rgba(163,129,79,0.08));
  color:var(--gold-light);
}
.card h3{ margin-bottom:8px; }
.card p{ color:var(--muted); font-size:14.5px; margin:0; }

.feature-row{
  display:flex; gap:16px; padding:20px 0;
  border-bottom:1px solid var(--line);
}
.feature-row:last-child{ border-bottom:none; }
.feature-row .icon-badge{ margin-bottom:0; flex-shrink:0; width:44px; height:44px; }
.feature-row h3{ margin:0 0 4px; font-size:17px; }
.feature-row p{ margin:0; font-size:14px; color:var(--muted); }

.chip-grid{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  display:flex; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:8px 18px 8px 8px;
  font-size:14px; font-weight:600; transition:transform .22s, box-shadow .22s;
}
.chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.chip .icon-badge{ width:34px; height:34px; margin:0; border-radius:50%; }

/* ---------- Purpose / CTA ---------- */
.purpose-banner{
  background:linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 100%);
  color:var(--paper); text-align:center; padding:56px 30px; border-radius:var(--radius-lg);
  position:relative; overflow:hidden;
}
.purpose-banner::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 100%, rgba(224,200,155,0.15), transparent 60%);
}
.purpose-banner > *{ position:relative; z-index:1; }
.purpose-banner blockquote{
  font-family:var(--ff-heading); font-size:clamp(22px, 2.6vw, 30px);
  font-style:italic; margin:10px 0; color:var(--champagne);
}
.purpose-banner cite{
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-pale); font-style:normal;
}

.cta-banner{
  background:linear-gradient(135deg, var(--cream-alt), var(--cream-deep));
  border-radius:var(--radius-lg); padding:44px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border:1px solid var(--line);
}
.cta-banner h2{ margin-bottom:6px; }
.cta-banner p{ margin:0; color:var(--muted); font-size:16px; }

/* ---------- Catalog / Product ---------- */
.catalog-nav{
  position:sticky; top:73px; z-index:40;
  background:rgba(245,237,224,0.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 0;
}
.catalog-nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
}
.catalog-nav-inner::-webkit-scrollbar{display:none;}
.catalog-nav a{
  white-space:nowrap; font-size:12.5px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); color:var(--ink);
  transition:background .2s, color .2s, border-color .2s;
}
.catalog-nav a:hover{ background:var(--gold); color:var(--white); border-color:var(--gold); }

.catalog-block{padding:70px 0;}
.catalog-block.dark{background:var(--dark); color:var(--paper);}
.catalog-block.dark h2, .catalog-block.dark h3{color:var(--paper);}
.catalog-block.alt{background:var(--cream-alt);}
.catalog-block.dark p{color:rgba(245,237,224,0.8);}
.catalog-head{margin-bottom:32px;}
.collection-name{
  display:block; font-family:var(--ff-heading); font-style:italic; font-size:19px;
  color:var(--gold-deep); margin-top:4px;
}
.catalog-block.dark .collection-name{color:var(--gold-light);}

.fabric-layout{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.fabric-photo{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/3;
}
.fabric-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.fabric-photo:hover img{ transform:scale(1.04); }
@media(max-width:900px){ .fabric-layout{grid-template-columns:1fr;} }

.swatch-label{
  display:block; font-size:12px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--gold-deep); margin:12px 0 16px;
}
.catalog-block.dark .swatch-label{color:var(--gold-light);}
.swatch-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.swatch{text-align:center;}
.swatch-photo{
  aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); margin-bottom:8px; transition:transform .3s;
}
.swatch:hover .swatch-photo{ transform:scale(1.06); }
.swatch-photo img{ width:100%; height:100%; object-fit:cover; }
.swatch span{font-size:12.5px; font-weight:700;}
.swatch .code{display:block; font-size:10.5px; font-weight:500; color:var(--muted); margin-top:2px;}
.catalog-block.dark .swatch .code{color:var(--gold-pale);}
@media(max-width:640px){ .swatch-grid{grid-template-columns:repeat(3,1fr);} }

.two-col-products{display:grid; grid-template-columns:1fr 1fr; gap:44px;}
@media(max-width:900px){ .two-col-products{grid-template-columns:1fr;} }
.spec-table{margin-top:16px;}
.spec-row{
  display:flex; justify-content:space-between; gap:12px; padding:11px 0;
  border-bottom:1px dashed rgba(163,129,79,0.3); font-size:13.5px;
}
.spec-code{font-weight:700;}
.spec-colors{color:var(--muted);}
.note-card{
  background:var(--cream-alt); border-radius:var(--radius); padding:20px 24px;
  margin-top:34px; font-size:14px; border-left:3px solid var(--gold);
}

.supply-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:26px; align-items:stretch;}
@media(max-width:900px){ .supply-grid{grid-template-columns:1fr;} }
.product-photo-card{
  aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); margin-bottom:16px;
}
.product-photo-card img{ width:100%; height:100%; object-fit:cover; }

.pantry-items{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;}
.pantry-item{
  background:rgba(255,255,255,0.06); border:1px solid rgba(201,169,120,0.3);
  border-radius:12px; padding:16px 28px; font-weight:700; color:var(--paper);
}

.partner-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
@media(max-width:900px){ .partner-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:560px){ .partner-grid{grid-template-columns:repeat(2,1fr);} }
.partner-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 16px; text-align:center; transition:transform .22s, box-shadow .22s;
}
.partner-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.partner-badge{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:var(--white); font-family:var(--ff-heading);
  font-size:20px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.partner-card h4{margin:0 0 6px; font-size:15px;}
.partner-card p{font-size:12.5px; color:var(--muted); margin:0;}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
@media(max-width:900px){ .steps{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .steps{grid-template-columns:1fr;} }
.step{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; transition:transform .22s, box-shadow .22s;
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.step-num{
  font-family:var(--ff-heading); font-size:38px; color:var(--gold-light);
  font-weight:700; margin-bottom:8px; letter-spacing:-0.02em;
}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:36px;}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info-card{
  background:linear-gradient(160deg, var(--dark), var(--dark-3));
  color:var(--paper); border-radius:var(--radius-lg); padding:36px;
  position:relative; overflow:hidden;
}
.contact-info-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(224,200,155,0.12), transparent 55%);
}
.contact-info-card > *{ position:relative; z-index:1; }
.contact-info-card h3{ color:var(--paper); }
.contact-item{
  display:flex; gap:14px; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.09);
}
.contact-item:last-of-type{ border-bottom:none; }
.contact-item .label{
  font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gold-light); font-weight:700;
}
.contact-item .value{font-size:15.5px; font-weight:600; margin-top:3px; color:var(--paper);}
.contact-item .value a{ color:var(--paper); }
.contact-item .value a:hover{ color:var(--gold-light); }
.contact-item .note{font-size:12px; color:rgba(245,237,224,0.55); margin-top:2px;}
.social-row{display:flex; gap:10px; margin-top:24px;}
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(201,169,120,0.4);
  display:flex; align-items:center; justify-content:center; color:var(--gold-light);
  transition:background .2s, color .2s, transform .2s;
}
.social-row a:hover{ background:var(--gold-light); color:var(--dark); transform:translateY(-2px); }

.form-card{
  background:var(--paper); border-radius:var(--radius-lg); padding:36px;
  box-shadow:var(--shadow); border:1px solid var(--line);
}
.form-card > p{ color:var(--muted); margin-bottom:22px; }
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:560px){ .form-row{grid-template-columns:1fr;} }
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--ink);}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:12px;
  border:1.5px solid var(--line); font-family:var(--ff-body); font-size:14.5px;
  background:var(--cream); color:var(--text); transition:border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); background:var(--paper);
}
.field textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:12px; color:var(--muted); margin-top:10px; }
.form-success{
  display:none; margin-top:16px; padding:14px 18px; border-radius:12px;
  background:#e0efd8; color:#2f5e2a; font-size:14px; align-items:center; gap:10px;
  border-left:3px solid #4a8c3b;
}
.form-success.show{display:flex;}

.map-block{
  margin-top:44px; border-radius:var(--radius-lg);
  background:var(--cream-alt); min-height:240px;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  overflow:hidden;
}
.map-block iframe{ width:100%; height:280px; border:0; display:block; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--dark); color:rgba(245,237,224,0.72);
  padding:64px 0 26px; font-size:14px;
}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-brand img{
  height:40px; width:40px; object-fit:cover; object-position:center 20%;
  border-radius:50%;
}
.footer-brand span{font-family:var(--ff-heading); font-size:20px; color:var(--paper); font-weight:700;}
.footer-col h4{
  color:var(--paper); font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
  margin-bottom:16px;
}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col li{margin-bottom:10px;}
.footer-col a{ transition:color .2s; }
.footer-col a:hover{color:var(--gold-light);}
.footer-col p{ margin:0 0 8px; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:12.5px;
}
.music-credit{margin-top:16px; font-size:11px; color:rgba(245,237,224,0.4);}
.music-credit a{color:rgba(245,237,224,0.55); text-decoration:underline;}

/* ---------- Sound toggle ---------- */
.sound-toggle{
  position:fixed; right:22px; bottom:22px; width:50px; height:50px; border-radius:50%;
  background:var(--dark); color:var(--gold-light);
  border:1px solid rgba(201,169,120,0.4);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:60; box-shadow:var(--shadow);
  transition:transform .22s, background .22s;
}
.sound-toggle:hover{ transform:scale(1.06); background:var(--dark-2); }
.sound-toggle .icon-off{display:none;}
.sound-toggle.muted .icon-on{display:none;}
.sound-toggle.muted .icon-off{display:block;}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; right:22px; bottom:82px; width:52px; height:52px; border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:60; box-shadow:var(--shadow);
  transition:transform .22s;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:26px; height:26px; }

/* ---------- Intro screen ---------- */
.intro-screen{
  position:fixed; inset:0;
  background:linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 100%);
  z-index:200; display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.intro-screen.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-inner{ text-align:center; padding:0 20px; }
.intro-logo{
  width:280px; max-width:70vw; height:auto; margin:0 auto 22px; border-radius:20px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);
  animation:introPulse 2.4s ease-in-out infinite;
  filter:drop-shadow(0 6px 20px rgba(224,200,155,0.35));
}
@keyframes introPulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
.intro-word{font-family:var(--ff-heading); font-size:46px; color:var(--paper); font-weight:700; letter-spacing:-0.02em;}
.intro-word span{color:var(--gold-light);}
.intro-tagline{color:var(--gold-pale); letter-spacing:4px; font-size:12px; margin-top:10px; text-transform:uppercase;}
.intro-bar{
  width:180px; height:2px; background:rgba(255,255,255,0.12);
  margin:26px auto 12px; overflow:hidden; border-radius:2px;
}
.intro-bar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--gold-light), var(--champagne));
  animation:introLoad 2s var(--ease) forwards;
}
@keyframes introLoad{ to{width:100%;} }
.intro-skip{font-size:11px; color:rgba(245,237,224,0.35); letter-spacing:1.5px;}

/* ---------- Reveal / Load animations ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.load-fade{opacity:0; animation:fadeUp .9s var(--ease) forwards;}
.d1{animation-delay:.1s;} .d2{animation-delay:.22s;} .d3{animation-delay:.34s;} .d4{animation-delay:.46s;}
@keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Mobile tweaks ---------- */
@media(max-width:640px){
  .section{ padding:64px 0; }
  .catalog-block{ padding:56px 0; }
  .hero{ padding:80px 0 64px; }
  .page-hero{ padding:72px 0 48px; }
  .container{ padding:0 20px; }
  .site-footer{ padding:48px 0 22px; }
  .cta-banner, .purpose-banner{ padding:32px 24px; text-align:center; justify-content:center; }
  .cta-banner > div{ width:100%; }
  .form-card{ padding:26px 22px; }
  .contact-info-card{ padding:28px 24px; }
  .brand-word{ font-size:19px; }
  .brand img{ height:36px; }
  .header-inner{ padding:12px 20px; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .wa-float{ right:16px; bottom:76px; width:48px; height:48px; }
  .sound-toggle{ right:16px; bottom:16px; width:44px; height:44px; }
}
@media(max-width:400px){
  .btn{ padding:12px 22px; font-size:13.5px; }
  h1{ font-size:32px; }
  .intro-word{ font-size:38px; }
}

/* ---------- Print ---------- */
@media print{
  .site-header, .site-footer, .mobile-nav, .intro-screen,
  .sound-toggle, .wa-float, .cta-banner{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section, .catalog-block{ padding:20px 0; }
}


/* ============ Solid colour swatches (for on-tone chips) ============ */
.color-swatch{
  aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); margin-bottom:8px; transition:transform .3s;
  position:relative;
}
.color-swatch::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.18), transparent 45%, rgba(0,0,0,0.10) 100%);
}
.swatch:hover .color-swatch{ transform:scale(1.06); }
.color-swatch.ontrio-grey{background:#7d7c74;}
.color-swatch.ontrio-dove{background:#b8b3a4;}
.color-swatch.ontrio-silver{background:#a6a49a;}
.color-swatch.ontrio-moca{background:#8a7561;}
.color-swatch.ontrio-castel{background:#57493c;}
.color-swatch.ontrio-beige{background:#cbb99b;}
.color-swatch.nadeko-dkgrey{background:#3a3a3a;}
.color-swatch.nadeko-grey{background:#7c7c78;}
.color-swatch.nadeko-silver{background:#c0c0bb;}
.color-swatch.nadeko-fushia{background:#c81b64;}
.color-swatch.nadeko-punch{background:#a71339;}
.color-swatch.nadeko-kashmer{background:#c9a2a8;}
.color-swatch.nadeko-rose{background:#e79ea6;}
.color-swatch.nadeko-wine{background:#6f1a2b;}
.color-swatch.nadeko-red{background:#c5142a;}
.color-swatch.nadeko-mandarin{background:#e26b28;}
.color-swatch.nadeko-orange{background:#eb8f22;}
.color-swatch.nadeko-olive{background:#7b7a2d;}
.color-swatch.nadeko-green{background:#3c7e33;}
.color-swatch.nadeko-pistachio{background:#c9d17e;}
.color-swatch.dona-lavore{background:#c9b696;}
.color-swatch.dona-ltbeige{background:#dcc7a4;}
.color-swatch.dona-castel{background:#8a6d4c;}
.color-swatch.dona-tan{background:#a37f57;}
.color-swatch.voile-white{background:#fbf6ec;}
.color-swatch.voile-offwhite{background:#f2e9d7;}
.color-swatch.voile-beige{background:#e2d3b7;}

/* Partner logo strip */
.partner-strip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:20px;
  align-items:center;
}
@media(max-width:820px){ .partner-strip{grid-template-columns:repeat(3,1fr);} }
@media(max-width:520px){ .partner-strip{grid-template-columns:repeat(2,1fr);} }
.partner-strip .partner-logo{
  aspect-ratio:16/9; background:var(--paper); border:1px solid var(--line); border-radius:14px;
  display:flex; align-items:center; justify-content:center; padding:14px 18px; overflow:hidden;
  transition:transform .22s, box-shadow .22s;
}
.partner-strip .partner-logo:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.partner-strip .partner-logo img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Partner detail block */
.partner-block{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px; margin-bottom:22px; display:grid; grid-template-columns:220px 1fr; gap:30px; align-items:start;
}
@media(max-width:820px){ .partner-block{grid-template-columns:1fr; padding:26px;} }
.partner-block .p-logo{
  aspect-ratio:1/1; max-width:220px; background:var(--cream-alt); border-radius:16px;
  display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden;
}
.partner-block .p-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.partner-block h3{ margin-top:0; font-size:22px; }
.partner-block .role{ font-family:var(--ff-heading); font-style:italic; color:var(--gold-deep); font-size:15px; margin-bottom:14px; display:block; }
.partner-block ul.tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:14px 0 0; padding:0; }
.partner-block ul.tags li{
  background:var(--cream-alt); border-radius:999px; padding:6px 14px;
  font-size:12px; font-weight:700; letter-spacing:0.4px; color:var(--ink);
}


/* ============ Material tags + color code ============ */
.material-tags{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px;}
.mat-tag{
  background:var(--cream-alt); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; font-size:12.5px; color:var(--text); letter-spacing:0.2px;
}
.mat-tag b{color:var(--gold-deep); font-weight:700; margin-left:2px;}
.mat-tag.dark{background:rgba(255,255,255,0.06); border-color:rgba(201,169,120,0.28); color:rgba(245,237,224,0.85);}
.mat-tag.dark b{color:var(--gold-light);}
.cc{font-size:10.5px; color:var(--muted); font-weight:500; margin-left:1px;}
.section.dark .cc, .catalog-block.dark .cc{color:var(--gold-pale);}


/* Contact form error message */
.form-error{
  display:none; margin-top:12px; padding:12px 16px; border-radius:12px;
  background:#fce9e6; color:#a02020; font-size:14px; border-left:3px solid #a02020;
}
.form-error.show{display:block;}