/* ===========================================================
   QUANTITY KITCHENS UAE — Design System v2
   Charcoal-led · crimson accent · bright & airy
   =========================================================== */

:root {
  --crimson: #E6143C;
  --crimson-deep: #C20E30;
  --crimson-soft: #FCE7EB;
  --charcoal: #2A2A2E;
  --charcoal-2: #46464A;
  --ink: #1A1A1A;

  --bg: #FFFFFF;
  --cream: #FBF8F3;
  --sand: #F4EFE7;
  --line: #ECE6DC;
  --line-2: #E2DBCF;
  --muted: #76706A;
  --gold: #C8A35B;

  --shadow-xs: 0 1px 2px rgba(42,42,46,.05);
  --shadow-sm: 0 6px 20px -8px rgba(42,42,46,.12);
  --shadow-md: 0 22px 48px -24px rgba(42,42,46,.22);
  --shadow-lg: 0 40px 80px -36px rgba(42,42,46,.30);
  --shadow-crimson: 0 16px 34px -14px rgba(230,20,60,.4);

  --display: "Fraunces", "Playfair Display", Georgia, serif;
  --serif: "Fraunces", Georgia, serif;
  --body: "Inter", system-ui, sans-serif;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 16px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.16,1,.3,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--body);
  color: var(--charcoal);
  background: var(--bg);
  line-height: 1.65; font-size: 16.5px;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

h1,h2,h3,h4 { font-family: var(--display); font-weight:600; line-height:1.1; letter-spacing:-.015em; color: var(--ink); }
h1,h2 { font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0; }

.container { max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }

.eyebrow { font-family: var(--body); font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color: var(--crimson); display:inline-flex; align-items:center; gap:.7rem; }
.eyebrow::before { content:""; width:22px; height:1.5px; background: var(--crimson); display:inline-block; }
.eyebrow.center { justify-content:center; }
.eyebrow.on-dark { color:#F2B8C2; }
.eyebrow.on-dark::before { background:#F2B8C2; }

.section { padding: clamp(72px, 9vw, 132px) 0; }
.section-head { max-width:660px; margin-bottom: clamp(36px,5vw,64px); }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head h2 { font-size: clamp(2rem,4.4vw,3.3rem); margin:.9rem 0 1rem; }
.section-head p { color: var(--muted); font-size:1.05rem; }
.bg-cream { background: var(--cream); }
.bg-sand { background: var(--sand); }

.btn { display:inline-flex; align-items:center; gap:.55rem; font-family: var(--body); font-weight:600; font-size:.9rem; padding:.92rem 1.55rem; border-radius:100px; border:1.5px solid transparent; cursor:pointer; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s; }
.btn i { font-size:1rem; }
.btn-primary { background: var(--crimson); color:#fff; box-shadow: var(--shadow-crimson); }
.btn-primary:hover { background: var(--crimson-deep); transform: translateY(-3px); }
.btn-dark { background: var(--charcoal); color:#fff; }
.btn-dark:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-outline { background:transparent; color: var(--charcoal); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--charcoal); transform: translateY(-3px); }
.btn-light { background:#fff; color: var(--charcoal); box-shadow: var(--shadow-sm); }
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-ghost { background: rgba(255,255,255,.1); color:#fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-ghost:hover { background:#fff; color: var(--charcoal); border-color:#fff; transform: translateY(-3px); }
.btn-wa { background:#25D366; color:#fff; }
.btn-wa:hover { transform: translateY(-3px); box-shadow:0 14px 30px -10px rgba(37,211,102,.5); }

.nav { position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1rem var(--gutter); transition: background .4s var(--ease), box-shadow .4s, padding .4s, border-color .4s; border-bottom:1px solid transparent; }
.nav.scrolled { background: rgba(255,255,255,.9); backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--shadow-xs); border-color: var(--line); padding-block:.7rem; }
.nav-logo { display:flex; align-items:center; height:40px; }
.nav-logo img { height:34px; width:auto; }
/* default (transparent over dark hero): white logo + white links */
.nav-logo .logo-light { display:block; }
.nav-logo .logo-dark { display:none; }
/* solid state OR pages that start on light: dark logo */
.nav.scrolled .logo-light, .nav.on-light .logo-light { display:none; }
.nav.scrolled .logo-dark, .nav.on-light .logo-dark { display:block; }
.nav-links { display:flex; align-items:center; gap:1.9rem; }
.nav-links a { font-size:.9rem; font-weight:500; color:#fff; position:relative; transition:color .3s; }
.nav.scrolled .nav-links a, .nav.on-light .nav-links a { color: var(--charcoal); }
.nav.on-light { background: rgba(255,255,255,.92); backdrop-filter: blur(18px) saturate(1.4); border-color: var(--line); box-shadow: var(--shadow-xs); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background: var(--crimson); transition:width .35s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta { display:flex; gap:.6rem; align-items:center; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span { width:25px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
.nav.scrolled .nav-toggle span, .nav.on-light .nav-toggle span { background: var(--charcoal); }

.loader { position:fixed; inset:0; z-index:9999; background: var(--cream); display:grid; place-items:center; transition: opacity .6s, visibility .6s; }
.loader.done { opacity:0; visibility:hidden; }
.loader-inner { text-align:center; }
.loader-flip { perspective:800px; width:210px; margin:0 auto; }
.loader-flip img { width:100%; animation: flip 1.9s var(--ease) infinite; transform-style:preserve-3d; }
@keyframes flip { 0%{ transform:rotateY(0);} 50%{ transform:rotateY(180deg);} 100%{ transform:rotateY(360deg);} }
.loader p { font-family: var(--serif); font-style:italic; font-size:1.08rem; color: var(--muted); margin-top:1.5rem; }
.loader-bar { width:140px; height:2px; background: var(--line-2); border-radius:2px; overflow:hidden; margin:1.1rem auto 0; }
.loader-bar i { display:block; height:100%; width:40%; background: var(--crimson); border-radius:2px; animation: load 1.1s ease-in-out infinite; }
@keyframes load { 0%{ transform:translateX(-120%);} 100%{ transform:translateX(320%);} }

.footer { background: var(--charcoal); color:#C9C4BC; padding: clamp(56px,7vw,92px) 0 0; }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1.4fr; gap:3rem; padding-bottom:3.4rem; }
.footer-logo img { height:38px; margin-bottom:1.2rem; }
.footer h4 { font-family: var(--body); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:1.2rem; font-weight:600; }
.footer-about p { color:#A8A29A; font-size:.94rem; max-width:34ch; margin-bottom:1.3rem; }
.footer-links a { display:block; color:#C9C4BC; font-size:.94rem; padding:.32rem 0; transition: color .25s, padding-left .25s; }
.footer-links a:hover { color: var(--crimson); padding-left:5px; }
.footer-contact li { display:flex; gap:.7rem; color:#C9C4BC; font-size:.94rem; margin-bottom:.85rem; }
.footer-contact i { color: var(--crimson); margin-top:4px; }
.footer-social { display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-social a { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.08); transition:.3s; }
.footer-social a:hover { background: var(--crimson); color:#fff; transform:translateY(-3px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.84rem; color:#8C867E; }

.floaters { position:fixed; right:22px; bottom:22px; z-index:90; display:flex; flex-direction:column; gap:.85rem; }
.float-btn { position:relative; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:1.4rem; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform .35s var(--ease), box-shadow .35s var(--ease); cursor:pointer; }
.float-btn:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.float-wa { background:#25D366; }
.float-wa::after { content:""; position:absolute; inset:0; border-radius:50%; animation: pulse 2.6s infinite; pointer-events:none; }
.float-call { background: var(--charcoal); }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.45);} 70%{ box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

[data-reveal]{ opacity:0; transform:translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.1s; }
[data-reveal][data-delay="2"]{ transition-delay:.2s; }
[data-reveal][data-delay="3"]{ transition-delay:.3s; }
[data-reveal][data-delay="4"]{ transition-delay:.4s; }

.page-hero { position:relative; padding: clamp(140px,17vw,210px) 0 clamp(48px,7vw,90px); background: var(--charcoal); color:#fff; overflow:hidden; text-align:center; }
.page-hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 80% 0%, rgba(230,20,60,.18), transparent 45%); }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { font-size: clamp(2.3rem,5.6vw,4.2rem); color:#fff; margin:.8rem 0; }
.page-hero p { font-size:1.1rem; color:#C9C4BC; max-width:600px; margin-inline:auto; }
.crumbs { font-size:.8rem; letter-spacing:.04em; color:#928C84; }
.crumbs a:hover { color:#fff; }

.dots { display:inline-flex; gap:6px; align-items:center; }
.dots i { width:6px; height:6px; border-radius:50%; background: var(--crimson); display:block; }
.dots i:nth-child(2){ background: var(--gold); }
.dots i:nth-child(3){ background: var(--crimson); opacity:.4; }

.center { text-align:center; }
.mt-2 { margin-top:1.8rem; }

@media (max-width:940px){
  .nav-links { position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background: var(--charcoal); flex-direction:column; justify-content:center; gap:1.6rem; transform:translateX(100%); transition:transform .45s var(--ease); padding:2rem; }
  .nav-links.open { transform:none; }
  .nav-links a { color:#fff !important; font-size:1.1rem; }
  .nav-toggle { display:flex; }
  .nav-cta .btn-wa span { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.2rem; }
}
@media (max-width:600px){
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}