/* =========================================================
   El Zayat – inner pages + shared nav extras
   (style.css holds the design tokens, nav, footer and home page)
   ========================================================= */
.nav ul a.active{background:var(--navy);color:#fff}
.center-link{display:flex;justify-content:center;margin-top:34px}

/* mobile menu */
@media (max-width:1000px){
  .nav.open{border-radius:26px;flex-wrap:wrap}
  .nav.open ul{display:flex;flex-direction:column;width:100%;order:3;padding:8px 0 4px}
  .nav.open ul a{display:block;padding:14px 16px;font-size:18px}
}

/* ---------- page hero ---------- */
.page-hero{padding:160px 0 80px;overflow:hidden;position:relative}
.page-hero h1{font-size:clamp(46px,7vw,96px);font-weight:800;margin:20px 0 18px;max-width:900px}
.page-hero p.lead{font-size:20px;max-width:640px;opacity:.9}
.crumbs{font-size:14px;font-weight:500;opacity:.75;margin-bottom:6px}
.crumbs a:hover{text-decoration:underline}
.ph-sun{background:var(--sun);color:var(--navy)}
.ph-grape{background:var(--grape);color:#fff}
.ph-coral{background:var(--coral);color:#fff}
.ph-cyan{background:var(--cyan);color:#fff}
.ph-navy{background:var(--navy);color:#fff}
.ph-grape .eyebrow,.ph-coral .eyebrow,.ph-navy .eyebrow{background:#fff}
.page-hero .blob{position:absolute;border-radius:50%;opacity:.18;background:#fff;pointer-events:none}

/* ---------- generic blocks ---------- */
.block{padding:100px 0}
.block.white{background:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.prose h2{font-size:clamp(34px,4vw,54px);color:var(--navy);margin-bottom:20px}
.prose h2 em{font-style:normal;background:linear-gradient(transparent 62%,var(--sun) 62%)}
.prose p{font-size:18px;color:var(--muted);margin-bottom:16px}
.photo-stack{position:relative;height:480px}
.photo-stack img{position:absolute;border-radius:26px;border:8px solid #fff;box-shadow:0 24px 50px rgba(20,38,58,.2);object-fit:cover}
.photo-stack img:nth-child(1){width:70%;height:75%;left:0;top:0;rotate:-4deg}
.photo-stack img:nth-child(2){width:58%;height:60%;right:0;bottom:0;rotate:5deg}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vcard{border-radius:var(--r);padding:30px;color:#fff;min-height:240px;display:flex;flex-direction:column;gap:14px}
.vcard .ic{font-size:34px}
.vcard h3{font-size:26px}
.vcard p{opacity:.92}
.quote{font-family:"Manrope";font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.15;color:var(--navy);max-width:900px;margin:0 auto;text-align:center}
.quote span{color:var(--coral)}

/* ---------- departments ---------- */
.dept-detail{padding:100px 0;scroll-margin-top:90px}
.dept-detail .split{align-items:start}
.dept-detail.flip .split > :first-child{order:2}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.tag{padding:9px 16px;border-radius:99px;background:#fff;font-weight:700;font-size:14px;color:var(--navy);box-shadow:0 3px 0 var(--line)}
.mini-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.mini-logos .logo-pill{width:auto;height:84px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.fact{background:#fff;border-radius:18px;padding:18px}
.fact b{display:block;font-family:"Manrope";font-size:30px;color:var(--navy);line-height:1}
.fact span{font-size:14px;color:var(--muted)}
.big-badge{background:#fff;border-radius:28px;padding:40px;display:grid;place-items:center;box-shadow:0 20px 40px rgba(20,38,58,.12);rotate:-2deg;margin-bottom:20px}
.big-badge img{max-height:140px}
.past{border:2px dashed var(--line);border-radius:var(--r);padding:26px;background:#fff}
.past h3{color:var(--navy);font-size:22px;margin-bottom:6px}
.past p{color:var(--muted)}

/* ---------- brands ---------- */
.toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:28px}
.search{position:relative;flex:1;max-width:460px}
.search input{padding-left:48px;background:#fff;font-size:17px}
.search::before{content:"⌕";position:absolute;left:16px;top:50%;translate:0 -52%;font-size:24px;color:var(--muted)}
.count{font-weight:700;color:var(--navy);background:var(--sun);padding:8px 16px;border-radius:99px}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.brand-card{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.brand-card[hidden]{display:none}
.brand-card .logo-pill{width:100%;height:120px}
.brand-card span{font-weight:700;font-size:14px;color:var(--navy)}
.empty{text-align:center;padding:60px 0;color:var(--muted);font-size:18px}
.cta-strip{border-radius:32px;background:var(--grape);color:#fff;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-strip h3{font-size:clamp(26px,3vw,38px);max-width:620px}

/* ---------- marketing ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{background:#fff;border-radius:var(--r);padding:28px;border:2px solid var(--line);transition:transform .3s,border-color .3s}
.svc:hover{transform:translateY(-6px);border-color:var(--cyan)}
.svc .ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:28px;margin-bottom:16px}
.svc h3{font-size:22px;color:var(--navy);margin-bottom:8px}
.svc p{color:var(--muted)}
.seasons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.season{padding:14px 22px;border-radius:99px;font-weight:700;color:#fff;font-size:17px}
#gallery figure{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,20,32,.92);display:grid;place-items:center;padding:30px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1100px,92vw);max-height:82vh;border-radius:18px;object-fit:contain}
.lb-btn{position:absolute;width:54px;height:54px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:24px;cursor:pointer;display:grid;place-items:center}
.lb-close{top:20px;right:20px}.lb-prev{left:20px;top:50%}.lb-next{right:20px;top:50%}
.lb-count{position:absolute;bottom:22px;left:50%;translate:-50% 0;color:#fff;font-weight:700}

/* ---------- contact ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-50px;position:relative;z-index:2}
.ccard{border-radius:var(--r);padding:26px;color:#fff;display:flex;flex-direction:column;gap:6px;transition:transform .25s}
.ccard:hover{transform:translateY(-5px)}
.ccard .ic{font-size:30px;margin-bottom:6px}
.ccard b{font-family:"Manrope";font-size:20px}
.ccard span{opacity:.92;font-size:15px;word-break:break-word}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.contact-grid form{box-shadow:0 20px 40px rgba(20,38,58,.08);padding:34px}
.contact-grid form h2{font-size:34px;color:var(--navy)}
.contact-grid form p{color:var(--muted);margin-bottom:6px}
.map{border-radius:26px;overflow:hidden;border:6px solid #fff;box-shadow:0 20px 40px rgba(20,38,58,.1);background:#fff}
.map iframe{width:100%;height:340px;border:0;display:block}
.hours{background:var(--navy);color:#fff;border-radius:26px;padding:28px;margin-top:20px}
.hours h3{font-size:22px;margin-bottom:12px}
.hours ul{list-style:none}
.hours li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ffffff1f}
.hours li.closed span:last-child{color:#ff8a80}
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border-radius:18px;padding:20px 24px;border:2px solid var(--line)}
.faq summary{font-weight:700;font-size:18px;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--muted)}

@media (max-width:1000px){
  .split,.contact-grid{grid-template-columns:1fr;gap:36px}
  .dept-detail.flip .split > :first-child{order:0}
  .cards3,.services{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:repeat(2,1fr)}
  .photo-stack{height:360px}
}
@media (max-width:560px){
  .page-hero{padding:130px 0 60px}
  .contact-cards,.facts{grid-template-columns:1fr}
  .mini-logos{grid-template-columns:repeat(2,1fr)}
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  .cta-strip{padding:30px 24px}
  .contact-grid form{padding:22px}
  .lb-prev,.lb-next{top:auto;bottom:60px}
}

/* anti-spam honeypot field: hidden from people, visible to bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-status{font-weight:700;margin:0}.form-status.err{color:#c62828}.form-status.ok{color:#1b7f43}

/* =========================================================
   Professional refinement – structure (fonts, buttons, motion)
   with the original accent colours + logo blue as brand colour.
   ========================================================= */
:root{--r:16px}
body{font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.025em}
h1{font-weight:800}
h2,h3{font-weight:700}

/* buttons: flat, logo blue */
.btn{border-radius:10px;padding:14px 22px;font-weight:600;letter-spacing:.005em;transition:background .2s,transform .2s,box-shadow .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(11,74,133,.22)}
.btn-primary:hover{background:var(--navy-2);box-shadow:0 8px 22px rgba(11,74,133,.28)}
.btn-ghost{background:#fff;color:var(--navy);box-shadow:none;border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy)}
.nav .btn{box-shadow:none;padding:11px 18px}
.story .btn-primary,.cta-strip .btn-primary,.cta-box .btn-primary,.page-hero .btn-primary{background:#fff;color:var(--navy);box-shadow:none}
.cta-strip .btn-primary:hover,.page-hero .btn-primary:hover{background:var(--blue-50)}
form .btn{box-shadow:none!important;border-radius:10px}

/* headline accents: a slimmer marker in the original colours */
.head h2 em,.prose h2 em{background:linear-gradient(transparent 72%,rgba(255,196,33,.75) 72%)}
.story .head h2 em{background:linear-gradient(transparent 72%,rgba(255,90,78,.85) 72%)}
.eyebrow{font-size:12px;letter-spacing:.12em;padding:6px 12px;border-radius:6px}

/* calmer motion: no floating shapes or spinning, gentle tilt only */
.shape{display:none!important}
.collage figure{animation:none;border-width:6px;border-radius:18px;box-shadow:0 20px 40px rgba(16,40,70,.16)}
.collage .c1{transform:rotate(-2deg)} .collage .c2{transform:rotate(2deg)} .collage .c3{transform:rotate(-1deg)}
.sticker{animation:none;width:118px;height:118px;box-shadow:0 8px 20px rgba(217,161,0,.35)}

/* colour mix: accents + logo blue + a touch of logo grey */
.s1{background:var(--coral)} .s2{background:var(--navy)} .s3{background:var(--slate)} .s4{background:var(--grass)}
.stat{border-radius:var(--r)}
.logo-pill{box-shadow:none;border:1px solid var(--line);border-radius:12px}
.logo-pill:hover{transform:translateY(-2px)}
.dept{border-radius:20px}
.dept:hover{transform:translateY(-4px)}
.step{border-radius:var(--r)}
.step .num{rotate:0deg;border-radius:12px}
.masonry figure{border-radius:14px}
.tag{box-shadow:none;border:1px solid var(--line);font-weight:600}
.chip{font-weight:600}
.svc{border-radius:var(--r);border:1px solid var(--line)}
.svc .ic{color:var(--navy)}
.vcard,.ccard,.hours{border-radius:var(--r)}
.season{font-weight:600}
.cta-strip{border-radius:20px}
.cta-box{border-radius:26px}
.big-badge{rotate:0deg;border-radius:16px}
.photo-stack img{border-width:6px;border-radius:18px}
.photo-stack img:nth-child(1){rotate:-2deg} .photo-stack img:nth-child(2){rotate:2deg}
.fab{background:var(--navy);animation:none;width:56px;height:56px;box-shadow:0 10px 24px rgba(11,74,133,.35)}
.contact-list span.ic svg{width:20px;height:20px}

/* ---------- B2B touches: section labels, trust strip, partner paths, calmer type ---------- */
.kicker{display:block;font-family:"Inter",sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.story .kicker{color:#9fb8d6}
.cta-box .kicker{color:rgba(255,255,255,.8)}
.hero h1{font-size:clamp(40px,4.9vw,68px);line-height:1.06;margin:20px 0}
.hero h1 .hl{background:linear-gradient(transparent 74%,rgba(255,196,33,.8) 74%)}
.page-hero h1{font-size:clamp(38px,5.2vw,72px)}
.head h2{font-size:clamp(30px,3.6vw,48px)}
.prose h2{font-size:clamp(30px,3.4vw,46px)}
.cta-box h2{font-size:clamp(32px,3.6vw,48px)}
.hero-pdf{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:600;font-size:15px;color:var(--navy);border-bottom:1.5px solid rgba(11,74,133,.35);padding-bottom:2px}
.hero-pdf:hover{border-bottom-color:var(--navy)}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);max-width:620px}
.trust span{flex-basis:100%;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.trust b{font-weight:600;color:var(--navy)}
.trust b:not(:first-of-type)::before{content:"·";color:var(--grey);margin-right:14px}
.paths{padding:110px 0 10px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.path{background:#fff;border:1px solid var(--line);border-top:5px solid var(--navy);border-radius:20px;padding:34px;display:flex;flex-direction:column;gap:12px}
.path.alt{border-top-color:var(--coral)}
.ptag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.path h3{font-size:clamp(24px,2.4vw,30px);color:var(--navy)}
.path ul{list-style:none;display:grid;gap:10px;margin:6px 0 14px}
.path li{position:relative;padding-left:28px;color:var(--ink)}
.path li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--blue-50);box-shadow:inset 0 0 0 4px var(--navy)}
.path.alt li::before{box-shadow:inset 0 0 0 4px var(--coral);background:#ffe9e7}
.path .btn{align-self:flex-start;margin-top:auto}
.form-status{font-weight:600;margin:0}.form-status.ok{color:#1b7f43}.form-status.err{color:#c62828}
@media (max-width:900px){.pgrid{grid-template-columns:1fr}.path{padding:26px}}

/* ---------- Logo-only colour version: blue + grey family everywhere ---------- */
.eyebrow{background:var(--blue-50);color:var(--navy)}
.page-hero .eyebrow{background:rgba(255,255,255,.14)!important;color:#fff!important}
.dept-detail .eyebrow{background:var(--navy)!important;color:#fff!important}
.head h2 em,.prose h2 em{background:none;color:var(--cyan)}
.story .head h2 em{background:none;color:#8EC1F0}
.hero h1 .hl{background:none;color:var(--cyan)}
.quote span{color:var(--cyan)}
.hero{background:radial-gradient(circle at 85% 15%,#DCE8F6 0,transparent 42%),linear-gradient(180deg,#F8FAFC 0%,var(--cream) 100%)}
.sticker{background:var(--navy);color:#fff;box-shadow:0 10px 24px rgba(11,74,133,.3)}
.s1{background:var(--navy)} .s2{background:var(--cyan)} .s3{background:var(--slate)} .s4{background:var(--navy-2)}
.stat::after{background:rgba(255,255,255,.08)}
.tl .dot{background:#fff!important;color:var(--navy)!important;font-size:20px;box-shadow:0 0 0 6px var(--navy),0 0 0 7px rgba(255,255,255,.25)}
.d-toys{background:var(--navy);color:#fff} .d-gift{background:var(--slate);color:#fff} .d-elec{background:var(--cyan);color:#fff}
.dept .since{opacity:.1}
.steps .step:nth-child(1) .num{background:var(--navy)!important}
.steps .step:nth-child(2) .num{background:var(--cyan)!important}
.steps .step:nth-child(3) .num{background:var(--slate)!important}
.cta-box{background:var(--navy)}
.contact-list span.ic{background:rgba(255,255,255,.12)}
.cta-strip{background:var(--navy)!important}
.ph-sun{background:var(--navy);color:#fff}
.ph-coral{background:var(--slate);color:#fff}
.ph-grape{background:var(--navy-2);color:#fff}
.ph-cyan{background:var(--cyan);color:#fff}
.ph-navy{background:var(--navy-deep);color:#fff}
.page-hero .blob{opacity:.07!important;background:#fff!important}
.vcard:nth-child(1){background:var(--navy)!important}
.vcard:nth-child(2){background:var(--slate)!important}
.vcard:nth-child(3){background:var(--cyan)!important}
.vcard,.vcard *{color:#fff!important}
.ccard:nth-child(1){background:var(--navy)!important}
.ccard:nth-child(2){background:var(--navy-2)!important}
.ccard:nth-child(3){background:var(--cyan)!important}
.ccard:nth-child(4){background:var(--slate)!important}
.ccard,.ccard *{color:#fff!important}
.svc .ic{background:var(--blue-50)!important;color:var(--navy)}
.season{background:#fff!important;color:var(--navy)!important;border:1.5px solid var(--line);font-size:15px}
.dept-detail#toys,.dept-detail#electronics{background:#fff!important}
.dept-detail#gifts{background:var(--cream)!important}
.dept-detail .btn-primary{background:var(--navy)!important;color:#fff!important;box-shadow:0 6px 16px rgba(11,74,133,.22)!important}
.count{background:var(--blue-50)}
.path.alt{border-top-color:var(--cyan)}
.path.alt li::before{box-shadow:inset 0 0 0 4px var(--cyan);background:var(--blue-50)}

/* stats counter: keep the animated numbers on their own layer so counting never repaints the hero or the page */
.stat{contain:layout paint;will-change:transform,opacity}
.stat .n{font-variant-numeric:tabular-nums;min-height:54px;contain:layout paint}
@media (max-width:640px){.stat .n{min-height:40px}}

/* departments: Toys logo grid - logos centred; Spartan larger */
.mini-logos .logo-pill{place-items:center}
.mini-logos .logo-pill img{max-width:100%;object-fit:contain;margin:0 auto}
.mini-logos .logo-pill img[alt="Spartan"]{max-height:none;width:100%}
.mini-logos .logo-pill:has(img[alt="Spartan"]){padding:8px}
/* departments Toys grid: explicit centring in both directions */
.mini-logos .logo-pill{display:flex;align-items:center;justify-content:center;line-height:0}
.mini-logos .logo-pill img{display:block;margin:0 auto}