/*
Theme Name:   Puzzle Marketing
Theme URI:    https://puzzle.qa
Author:       Puzzle Marketing & Advertising
Author URI:   https://puzzle.qa
Description:  The official WordPress theme for Puzzle Marketing & Advertising — a Qatar-based agency in TikTok content creation, social media management, web development, branding, SEO and video production. Pairs with the Puzzle Services, Puzzle Work, Puzzle Clients and Puzzle Websites plugins.
Version:      1.0.3
Requires PHP: 7.4
Text Domain:  puzzle-marketing
*/

:root{
  color-scheme: light;

  --pink: #EA267A;
  --purple: #692D8D;
  --grad: linear-gradient(90deg, #EA267A 0%, #B22C86 45%, #692D8D 100%);
  --grad-soft: linear-gradient(135deg, rgba(234,38,122,.14), rgba(105,45,141,.14));

  --maroon: #780016;
  --cobalt-band: #2665d6;
  --cobalt-deep: #061492;
  --forest: #254f1a;
  --mustard: #d6a337;
  --lavender: #e9c0e9;
  --lime: #d2e823;

  --linen: #f6f3f5;
  --white: #ffffff;
  --ink: #000000;
  --sage: #6b6470;

  --radius-nav: 8px;
  --radius-tag: 99px;
  --radius-card: 32px;
  --radius-card-lg: 56px;
  --radius-btn: 99px;

  --border: 2.5px solid var(--ink);
  --border-thin: 2px solid var(--ink);

  --display: 800 clamp(2.4rem, 5.6vw, 4.6rem)/1.0 'Plus Jakarta Sans', sans-serif;
  --heading: 800 clamp(1.7rem, 3.1vw, 2.85rem)/1.06 'Plus Jakarta Sans', sans-serif;
  --heading-sm: 800 1.65rem/1.12 'Plus Jakarta Sans', sans-serif;

  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --max: 1200px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.16px;
  overflow-x: hidden;
}

h1,h2,h3,h4,p,ul,figure{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
button,select,input,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3{ text-wrap: balance; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (min-width: 640px){ .wrap{ padding: 0 40px; } }

.eyebrow{
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple);
}
.eyebrow.on-dark{ color: var(--lavender); }
.eyebrow.on-grad{ color: rgba(255,255,255,.85); }
.accent{ color: var(--pink); }

/* ================= SKIP LINK ================= */
.skip-link{
  position:absolute; left:-9999px; top:auto; background:#fff; color:#000; padding:14px 20px;
  border:var(--border-thin); border-radius:8px; z-index:1000;
}
.skip-link:focus{ left:14px; top:14px; }

/* ================= NAV ================= */
.nav-shell{
  position: sticky; top: 12px; z-index: 200;
  display: flex; justify-content: center; padding: 0 14px; pointer-events:none;
}
.nav-shell-inner{
  position: relative;
  width: min(100%, 980px);
  display: flex;
  flex-direction: column;
}
.nav{
  pointer-events:auto; width:min(100%, 980px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--white); border: var(--border-thin); border-radius: var(--radius-nav);
  padding: 8px 8px 8px 18px;
}
.nav-logo{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.nav-logo img{ height:26px; width:auto; display:block; }
.nav-links{ display:none; gap:6px; font-weight:600; font-size:14px; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links li{ display:flex; }
.nav-links a{ padding:8px 12px; border-radius: 99px; opacity:.72; transition: opacity .15s, background-color .15s; }
.nav-links a:hover, .nav-links a:focus-visible{ opacity:1; background:rgba(0,0,0,.06); }
.nav-links .current-menu-item a, .nav-links a.is-current{ opacity:1; background: var(--pink); color:#fff; }
@media (min-width: 900px){ .nav-links{ display:flex; } }

.nav-actions{ display:flex; align-items:center; gap:8px; }

/* The mobile toggle is a native <details>/<summary> pair — no JavaScript
   required to open or close it, so it can never be "unclickable". */
.mobile-nav{ position: relative; display: flex; }
@media (min-width: 900px){ .mobile-nav{ display:none !important; } }

.mobile-nav > summary.nav-toggle{
  display: inline-flex !important;
  width: 38px !important; height: 38px !important;
  align-items: center; justify-content: center;
  background: transparent; border: var(--border-thin); border-radius: 8px;
  cursor: pointer;
  list-style: none;
}
.mobile-nav > summary.nav-toggle::-webkit-details-marker{ display:none; }
.mobile-nav > summary.nav-toggle::marker{ content:''; }
.mobile-nav > summary.nav-toggle svg{ width:18px; height:18px; pointer-events:none; }

.mobile-menu{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(260px, calc(100vw - 44px)) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: var(--white) !important;
  border: var(--border-thin) !important;
  border-radius: var(--radius-nav) !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  list-style: none !important;
  z-index: 300 !important;
}
.mobile-nav:not([open]) .mobile-menu{ display: none !important; }
.mobile-menu li{ list-style: none !important; margin: 0 !important; }
.mobile-menu a{
  padding: 12px 14px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: block !important;
  color: #000 !important;
  text-decoration: none !important;
}
.mobile-menu .current-menu-item a{ background: var(--pink) !important; color: #fff !important; }
.mobile-menu a:hover{ background: rgba(0,0,0,.06) !important; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: var(--radius-btn); border: var(--border-thin);
  font-weight:700; font-size:14.5px; padding: 11px 20px; white-space:nowrap;
  transition: transform .15s ease, background-color .15s ease, filter .15s ease;
}
.btn:active{ transform: translateY(2px); }
.btn-primary{ background: var(--pink); color: var(--ink); }
.btn-primary:hover{ filter: brightness(1.06); }
.btn-white{ background: var(--white); color: var(--ink); }
.btn-white:hover{ background:#f2f2f2; }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: rgba(0,0,0,.06); }
.btn-ghost-inv{ background: transparent; color: var(--white); border-color: var(--white); }
.btn-ghost-inv:hover{ background: rgba(255,255,255,.14); }
.btn-lg{ padding: 16px 28px; font-size: 15.5px; }
.btn:focus-visible, a:focus-visible{ outline: 3px solid var(--purple); outline-offset:2px; }

/* ================= layout ================= */
.band{ padding: 76px 0; }
.band-tight{ padding: 48px 0; }
.page-hero{ padding: 52px 0 60px; position:relative; overflow:hidden; }
.page-hero.grad{ background: var(--grad); color:#fff; }
.page-hero.grad::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.16); pointer-events:none; }
.page-hero.grad > *{ position:relative; z-index:1; }
.page-hero.linen{ background: var(--linen); }
.page-hero h1{ font: var(--heading); letter-spacing:-1.6px; margin: 14px 0 16px; max-width: 18ch; }
.page-hero p.lead{ font-size: 1.05rem; letter-spacing:-.3px; max-width: 58ch; opacity:.95; }

/* ================= HOME HERO ================= */
.hero{ background: var(--grad); padding: 52px 0 76px; position:relative; overflow:hidden; color:#fff; }
.hero::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.16); }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr; gap: 44px; align-items:center; }
@media(min-width: 980px){ .hero-grid{ grid-template-columns: 1.05fr 0.95fr; } }
.hero h1{ font: var(--display); letter-spacing: -3.2px; margin: 16px 0 20px; }
.hero-sub{ font-size: 1.1rem; line-height:1.45; letter-spacing:-.3px; max-width: 46ch; margin-bottom: 28px; font-weight:500; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }

.sticker-wall{ display:grid; grid-template-columns: repeat(3, 1fr); gap:13px; transform: rotate(1deg); }
.sticker{ border: var(--border-thin); border-radius: 18px; padding: 13px; min-height: 88px; display:flex; flex-direction:column; justify-content:space-between; font-weight:800; font-size: 12.5px; line-height:1.15; transition: transform .18s ease; color:#000; }
.sticker:hover{ transform: translateY(-3px) rotate(-1deg); }
.sticker span{ font-family:var(--font-mono); font-weight:500; font-size:10px; letter-spacing:.02em; opacity:.85; }
.s-1{ background:var(--white); grid-row: span 2; }
.s-2{ background:var(--cobalt-deep); color:#fff; }
.s-3{ background:var(--maroon); color:#fff; }
.s-4{ background:var(--mustard); }
.s-5{ background:var(--lavender); grid-column: span 2; }
.s-6{ background:var(--forest); color:#fff; }
.s-7{ background:var(--white); }
.s-8{ background:var(--lime); grid-column: span 2; }

/* ================= STRIP / MARQUEE ================= */
.strip{ background: var(--lavender); border-top: var(--border-thin); border-bottom: var(--border-thin); padding: 13px 0; overflow:hidden; }
.marquee{ display:flex; width:max-content; gap: 36px; animation: scroll-left 26s linear infinite; }
.marquee-track{ display:flex; gap:36px; align-items:center; }
.marquee:hover{ animation-play-state: paused; }
@keyframes scroll-left{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.strip-item{ font-family: var(--font-mono); font-weight:600; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; gap:10px;}
.strip-item .dot{ width:6px;height:6px;border-radius:50%;background:var(--purple); display:inline-block;}
@media (prefers-reduced-motion: reduce){ .marquee{ animation: none; } }

/* ================= STATS ================= */
.stat-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin-top:44px; }
@media(min-width:760px){ .stat-grid{ grid-template-columns: repeat(3,1fr);} }
@media(min-width:1040px){ .stat-grid{ grid-template-columns: repeat(6,1fr);} }
.stat-card{ border: var(--border-thin); border-radius: var(--radius-card); background:var(--white); padding:20px 16px; text-align:center; }
.stat-num{ font-family:var(--font-mono); font-weight:700; font-size:1.5rem; color:var(--pink); font-variant-numeric: tabular-nums; }
.stat-label{ font-size:.76rem; color:var(--sage); margin-top:6px; line-height:1.3; }

/* ================= section titles ================= */
.about-lead{ font: var(--heading); letter-spacing:-1.4px; max-width: 22ch; }
.about-copy{ max-width: 64ch; font-size:1.02rem; color:#2c2830; }

/* ================= simple card grid (home services teaser) ================= */
.cards-3{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:44px; }
@media(min-width:640px){ .cards-3{ grid-template-columns: 1fr 1fr; } }
@media(min-width:1000px){ .cards-3{ grid-template-columns: repeat(3, 1fr); } }
.svc-card{ border: var(--border-thin); border-radius: var(--radius-card); padding: 24px; display:flex; flex-direction:column; gap:12px; min-height: 190px; background:var(--white); transition: transform .18s ease; }
.svc-card:hover{ transform: translateY(-4px); }
.svc-card h3{ font-size:1.12rem; font-weight:800; letter-spacing:-.02em; }
.svc-card p{ font-size:.9rem; line-height:1.5; opacity:.9; }
.fill-pink{ background: var(--pink); color:#000; }
.fill-purple{ background: var(--purple); color:#fff; }
.fill-mustard{ background: var(--mustard); color:#000; }
.fill-lavender{ background: var(--lavender); color:#000; }
.fill-forest{ background: var(--forest); color:#fff; }
.fill-maroon{ background: var(--maroon); color:#fff; }
.fill-cobalt{ background: var(--cobalt-deep); color:#fff; }
.fill-white{ background: var(--white); color:#000; }

/* ================= MISSION/VISION blob cards ================= */
.mv-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:44px; }
@media(min-width:820px){ .mv-grid{ grid-template-columns: 1fr 1fr; } }
.mv-card{ border: var(--border-thin); border-radius: var(--radius-card-lg); padding: 38px 32px; display:flex; flex-direction:column; gap:14px; min-height: 240px; }
.mv-card h3{ font: var(--heading-sm); letter-spacing:-.6px; }
.mv-card p{ font-size:.96rem; line-height:1.55; opacity:.94; }
.mv-card svg{ width:44px; height:44px; }

/* ================= FOUNDER ================= */
.founder{ background: var(--purple); color: var(--white); }
.founder-grid{ display:grid; grid-template-columns:1fr; gap: 36px; align-items:start; }
@media(min-width: 860px){ .founder-grid{ grid-template-columns: 280px 1fr; } }
.founder-card{ background: var(--white); color:var(--ink); border: var(--border-thin); border-radius: var(--radius-card-lg); padding: 28px; text-align:center; }
.avatar{ width:110px;height:110px; border-radius:50%; background: var(--grad); border: var(--border-thin); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.9rem; margin: 0 auto 16px; }
.founder-card h3{ font-size:1.1rem; font-weight:800; }
.founder-card .role{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); margin-top:4px; }
.founder-quote p{ font-size: clamp(1.05rem, 1.9vw, 1.32rem); line-height:1.48; letter-spacing:-.01em; font-weight:500; margin-bottom:16px; }
.founder-quote em{ font-style:normal; background: var(--pink); color:var(--ink); padding: 0 6px; border-radius:6px; }
.founder-sign{ margin-top:22px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.05em; opacity:.85; }

/* ================= process steps ================= */
.process{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:44px; }
@media(min-width:760px){ .process{ grid-template-columns: repeat(4,1fr); } }
.process-step{ border: var(--border-thin); border-radius: var(--radius-card); background:var(--white); padding:22px; }
.process-num{ font-family:var(--font-mono); font-weight:700; color:var(--pink); font-size:1.1rem; margin-bottom:10px; }
.process-step h4{ font-weight:800; font-size:1rem; margin-bottom:6px; }
.process-step p{ font-size:.86rem; color:var(--sage); line-height:1.5; }

/* ================= EVENTS ================= */
.ev-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:40px; }
@media(min-width:700px){ .ev-grid{ grid-template-columns: repeat(2,1fr);} }
@media(min-width:1040px){ .ev-grid{ grid-template-columns: repeat(3,1fr);} }
.ev-card{ border: var(--border-thin); border-radius: var(--radius-card); background:var(--white); padding:22px; display:flex; flex-direction:column; gap:8px; }
.ev-date{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--purple); }
.ev-card h4{ font-size:1.03rem; font-weight:800; letter-spacing:-.01em; }
.ev-card p{ font-size:.87rem; color:#3a3532; line-height:1.5; }

/* ================= CONTACT ================= */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:28px; margin-top:44px; }
@media(min-width:900px){ .contact-grid{ grid-template-columns: 0.85fr 1.15fr; } }
.contact-cards{ display:flex; flex-direction:column; gap:14px; }
.contact-card{ border: var(--border-thin); border-radius: var(--radius-card); padding:20px 22px; display:flex; gap:14px; align-items:flex-start; background:var(--white); }
.contact-card svg{ width:26px;height:26px; flex-shrink:0; margin-top:2px; }
.contact-card h4{ font-weight:800; font-size:.98rem; margin-bottom:3px; }
.contact-card a, .contact-card span{ font-size:.9rem; color:var(--sage); }
.contact-card a:hover{ color:var(--pink); }

.form-card{ border: var(--border); border-radius: var(--radius-card-lg); background: var(--white); padding: 32px; }
.form-card h3{ font: var(--heading-sm); letter-spacing:-.5px; margin-bottom:6px; }
.form-card > p{ color:var(--sage); font-size:.92rem; margin-bottom:24px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.field input, .field select, .field textarea{ border: var(--border-thin); border-radius: 8px; padding: 12px 14px; background:var(--linen); width:100%; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: 3px solid var(--pink); outline-offset:1px; }
.field textarea{ resize: vertical; min-height: 96px; font-family:inherit; }
.field-row{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:.78rem; color:var(--sage); margin-top:10px; }
.form-status{ font-size:.9rem; font-weight:700; margin-bottom:18px; padding:12px 16px; border-radius:10px; border: var(--border-thin); }
.form-status.ok{ background: #ebffc5; }
.form-status.error{ background: #ffe0e0; }

/* ================= BRAND PLATE (logo showcase) ================= */
.brand-plate{ display:flex; justify-content:center; margin: 8px 0 -12px; }
.brand-plate-inner{ background:#fff; border: var(--border-thin); border-radius: 32px; padding: 22px 36px; display:inline-flex; }
.brand-plate-inner img{ height:92px; width:auto; display:block; }
@media (max-width:520px){ .brand-plate-inner img{ height:64px; } }

/* ================= CTA ================= */
.cta{ background: var(--grad); color:#fff; text-align:center; position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.16); }
.cta > *{ position:relative; z-index:1; }
.cta h2{ font: var(--heading); letter-spacing:-1.6px; max-width: 18ch; margin:0 auto 16px; }
.cta p{ max-width: 48ch; margin: 0 auto 28px; font-size:1.02rem; }
.cta-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* ================= FOOTER ================= */
footer.site-footer{ background: var(--ink); color: var(--white); padding: 52px 0 26px; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media(min-width:760px){ .foot-grid{ grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot-logo{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.foot-logo img{ height:34px; width:auto; display:block; filter: brightness(1.15); }
footer .foot-desc{ color:#a9a3ab; font-size:.9rem; max-width:34ch; line-height:1.55; }
footer h5{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#8d868f; margin-bottom:14px; }
footer ul{ display:flex; flex-direction:column; gap:10px; }
footer ul a{ font-size:.9rem; color:#e5e1e6; opacity:.85; }
footer ul a:hover{ opacity:1; text-decoration:underline; }
.foot-bottom{ border-top:1px solid #2a262b; margin-top:38px; padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.78rem; color:#8d868f; }

/* ================= reveal ================= */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.sr-only{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }