/* Design My Slides — v2 mockup, replicating the CURRENT live site's visual
   language (dark photo bands, Dosis/Open Sans, grayscale, boxy buttons)
   instead of the meraqi.in-inspired v1. Content rules unchanged: no prices,
   no e-commerce, single enquiry CTA, real phone number. */

@font-face { font-family: 'Dosis'; font-weight: 300 800; font-display: swap; src: url('fonts/dosis-variable.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/opensans-variable.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/opensans-italic-variable.woff2') format('woff2'); }

:root {
  --ink: #111111;
  --ink-soft: #333333;
  /* #777 measured 4.48:1 on white / 4.18:1 on --bg-tint — just under WCAG AA's
     4.5:1 for normal text. #666 clears both (5.74:1 / 5.36:1). */
  --gray: #666666;
  /* #ccc measured 1.6:1 on white — well under the 3:1 WCAG AA non-text-contrast
     minimum for UI component boundaries (input borders, link underlines).
     #949494 clears 3:1. */
  --gray-light: #949494;
  --line: #e5e5e5;
  --bg-tint: #f7f7f7;
  --white: #ffffff;
  --radius: 2px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Open Sans', arial, sans-serif;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
section { padding: 90px 0; }
@media (max-width: 700px) { section { padding: 56px 0; } .wrap { padding: 0 20px; } }

h1, h2, h3, h4 {
  font-family: 'Dosis', arial, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: .2em;
  margin: 0;
  color: var(--ink);
}
.eyebrow {
  font-family: 'Dosis', arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-weight: 300;
  font-size: 13px;
  color: var(--gray);
  margin: 0 0 18px;
}
/* Every "eyebrow + section-title (+ lede) + button" block (FAQ pre-footer,
   each landing page's "what's included" and closing-CTA sections) reuses
   plain .wrap with no dedicated class — center the whole block via :has()
   instead of touching 13+ HTML files individually. Fixes both the eyebrow
   (same root cause as the earlier hero/band eyebrow bug: max-width with no
   margin:auto) and the CTA button, which needs its container centered since
   inline-block elements align via the ancestor's text-align. */
.wrap:has(> .eyebrow + h2.section-title) { text-align: center; }
/* text-align only moves inline content (the h2's own text, the inline-block
   button) — .eyebrow is a block-level <p> capped at 60ch, so it needs its
   own margin:auto to actually center as a box; ancestor text-align alone
   doesn't reposition block children. */
.wrap:has(> .eyebrow + h2.section-title) > .eyebrow { margin-left: auto; margin-right: auto; }
h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.3; letter-spacing: .12em; }
h2.section-title { font-size: 15px; letter-spacing: .35em; text-align: center; margin-bottom: 50px; }
p { max-width: 60ch; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Buttons — near-square, uppercase, letter-spaced, matches the live site exactly */
.btn {
  display: inline-block;
  font-family: 'Open Sans', arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 14px 40px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color .25s, color .25s, border-color .25s;
}
.btn-light { background: rgba(255,255,255,.85); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }

/* Header */
.topbar { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.brand img { height: 46px; width: auto; }
.nav-links { display: none; align-items: center; gap: 32px; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-link { font-family: 'Dosis', arial, sans-serif; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); position: relative; padding-bottom: 4px; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--ink); transition: right .25s; }
.nav-link:hover::after { right: 0; }
.nav-phone { display: none; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .05em; color: var(--ink-soft); }
@media (min-width: 1100px) { .nav-phone { display: flex; } }
.nav-phone .icon { width: 15px; height: 15px; }
.nav-check { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -11px -11px -11px 0; cursor: pointer; }
@media (min-width: 900px) { .nav-toggle { display: none; } }
.mobile-nav { display: none; border-top: 1px solid var(--line); padding: 12px 0 20px; }
.nav-check:checked ~ .mobile-nav { display: block; }
/* .mobile-nav reuses the .wrap class for its padding/max-width, but since it's
   nested inside .topbar, the ".topbar .wrap { display:flex; height:80px }" rule
   above would otherwise match it too — laying links out in a row and clamping
   the box to 80px tall, so the 6 stacked links would overflow past it. */
.mobile-nav .wrap { display: block; height: auto; }
.mobile-nav a { display: block; padding: 12px 4px; font-family: 'Dosis', arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; font-size: 15px; min-height: 44px; box-sizing: border-box; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* Hero — full-bleed dark photo band */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #2a2a2a url('img/hero-bg.jpg') center/cover no-repeat;
  padding: 60px 20px;
}
.hero::before { content: ''; position: absolute; inset: 0; background: rgba(10,10,10,.62); }
.hero .inner { position: relative; z-index: 1; max-width: 760px; text-align: center; }
.hero .eyebrow { color: rgba(255,255,255,.8); text-align: center; margin-left: auto; margin-right: auto; }
.hero h1 { color: var(--white); font-weight: 300; letter-spacing: .16em; text-align: center; }
/* Stacks the button and any secondary link (e.g. "Message us on WhatsApp
   instead") on their own lines with breathing room between them, instead of
   the default inline flow that ran them together on one line. */
.hlinks { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero .hlinks { margin-top: 36px; }
.hero .lead { color: rgba(255,255,255,.75); margin: 20px auto 0; text-align: center; }
/* Shorter variant for inner-page headers — the full 640px height was sized for
   the homepage's headline + CTA button; inner pages usually just need eyebrow
   + h1 + a short lead paragraph. */
.hero.hero-page { min-height: 380px; padding: 50px 20px; }
.hero.hero-page .inner { max-width: 820px; }
.hero.hero-page h1 { font-size: clamp(24px, 3.4vw, 34px); }

/* Dark texture CTA band */
.band {
  position: relative;
  background: #1c1c1c url('img/band-bg.jpg') center/cover no-repeat;
  text-align: center;
  padding: 100px 20px;
}
.band::before { content: ''; position: absolute; inset: 0; background: rgba(5,5,5,.72); }
.band .inner { position: relative; z-index: 1; text-align: center; }
.band .eyebrow { color: rgba(255,255,255,.65); text-align: center; margin-left: auto; margin-right: auto; }
.band h2 { color: var(--white); font-size: clamp(20px,3vw,28px); letter-spacing: .1em; max-width: 760px; margin: 0 auto 32px; line-height: 1.5; text-align: center; }

/* Services — 3 col, icon + heading + copy */
.svc-grid { display: grid; gap: 50px; grid-template-columns: 1fr; text-align: center; }
@media (min-width: 800px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-grid .icon-wrap { width: 64px; height: 64px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; }
.svc-grid .icon { width: 26px; height: 26px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
.svc-grid h3 { font-size: 14px; letter-spacing: .25em; margin-bottom: 16px; }
.svc-grid p { margin: 0 auto 20px; font-size: 14px; }

/* Inline link out to a deeper landing page, used inside card/paragraph copy */
.link-cta { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--gray-light); font-size: 13px; font-weight: 600; padding-bottom: 1px; white-space: nowrap; }
.link-cta:hover { border-color: var(--ink); color: var(--ink); }

/* Centered intro/lede paragraph under a section-title */
.lede { font-size: 15px; color: var(--ink-soft); margin: -20px auto 0; max-width: 640px; text-align: center; }
.lede + .lede { margin-top: 16px; }
.lede .link-cta { border-color: var(--ink-soft); }
/* .lede has no bottom margin by default, so a button right after it (the FAQ
   pre-footer and every landing page's closing CTA) sat flush against the
   text with no breathing room. */
.lede + .btn { margin-top: 28px; }

/* "How It Works" — terse icon steps, no copy */
.steps-grid { display: grid; gap: 40px; grid-template-columns: 1fr; text-align: center; }
@media (min-width: 700px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.steps-grid .step-icon { width: 56px; height: 56px; margin: 0 auto 20px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.steps-grid .step-icon svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
.steps-grid h4 { font-size: 13px; letter-spacing: .15em; margin: 0; }

/* "Our Process" — icon steps with copy */
.process-grid { display: grid; gap: 50px; grid-template-columns: 1fr; text-align: center; }
@media (min-width: 800px) { .process-grid { grid-template-columns: repeat(3, 1fr); } }
.process-grid .step-icon { width: 56px; height: 56px; margin: 0 auto 22px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.process-grid .step-icon svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
.process-grid h3 { font-size: 14px; letter-spacing: .2em; margin-bottom: 14px; }
.process-grid p { font-size: 14px; margin: 0 auto; }

/* "Presentation Services" — alternating image/text rows */
.split-services { display: flex; flex-direction: column; gap: 90px; }
.split-row { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 800px) { .split-row { grid-template-columns: 1fr 1fr; gap: 70px; } }
/* Images are transparent-background composites (monitor mockups), so this
   uses a light tile + object-fit:contain to show the full graphic uncropped,
   unlike .work-grid's opaque dark deck screenshots below. */
.split-row .split-img { aspect-ratio: 800 / 451; overflow: hidden; border: 1px solid var(--line); background: var(--bg-tint); padding: 20px; }
.split-row .split-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (min-width: 800px) {
  .split-row.reverse .split-img { order: 2; }
  .split-row.reverse .split-text { order: 1; }
}
.split-text .icon-wrap { margin: 0 0 22px; }
.split-text .icon { width: 30px; height: 30px; stroke: var(--ink); fill: none; stroke-width: 1.3; display: block; }
.split-text h3 { font-size: 16px; letter-spacing: .2em; margin-bottom: 18px; }
.split-text p { font-size: 14px; margin: 0 0 22px; }

/* Work grid — 3x2, clean boxed tiles on white, matching the live site's plain
   grid (the live site runs these edge-to-edge with no frame; a light border
   here keeps them legible against a white section instead of bleeding into
   it). Aspect ratio matches the source images (1140x642) so nothing crops. */
.work-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-grid a { display: block; overflow: hidden; aspect-ratio: 1140 / 642; border: 1px solid var(--line); background: #1a1a1a; transition: border-color .25s, box-shadow .25s; }
.work-grid a:hover { border-color: var(--gray-light); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.work-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.work-grid a:hover img { transform: scale(1.04); }

/* Client logos — auto-scrolling marquee, two opposing tracks */
.logos-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.logos-marquee-track { display: flex; align-items: center; gap: 70px; width: max-content; animation: logos-scroll 70s linear infinite; }
.logos-marquee-track.reverse { animation-name: logos-scroll-reverse; }
.logos-marquee:hover .logos-marquee-track { animation-play-state: paused; }
/* Re-sourced directly from meraqi.in at native 700x700 per logo, composited into
   a 6-col sprite at 200px/cell, displayed at 120px — downscaled, not upscaled,
   so it stays crisp (the old sprite's 40px cells stretched to 120px were the
   cause of the pixelation). 8 marks that are pure white in their source (built
   for meraqi's black background) were inverted to dark versions for our white
   background — see scratchpad notes in the build log. */
.logo-sprite {
  /* 156px = 120px + 30%. Sprite cells are natively 200px, so this is still a
     downscale (0.78x), not an upscale — stays crisp, no pixelation. */
  width: 156px; height: 156px; flex-shrink: 0;
  background-image: url('img/clients-sprite.webp');
  background-size: 936px 936px;
  background-repeat: no-repeat;
  /* grayscale(100%) alone only desaturates — it preserves each logo's original
     lightness, so naturally light/pastel marks still read as light gray no
     matter the opacity. brightness() forces them genuinely dark; full color
     returns on hover since the hover rule below replaces this filter outright. */
  filter: grayscale(100%) brightness(.6);
  opacity: .9;
  transition: opacity .2s, filter .2s;
}
.logo-sprite:hover { opacity: 1; filter: grayscale(0%); }
@keyframes logos-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes logos-scroll-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .logos-marquee-track { animation: none; }
  .logos-marquee { overflow-x: auto; }
}

/* Two-column intro/explainer pattern — small label+heading on the left, body
   copy on the right. Used across inner landing pages for "what we solve",
   "how it works" type sections. */
.intro-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .intro-grid { grid-template-columns: 1fr 1.4fr; gap: 60px; } }
.intro-grid h2 { font-size: 22px; letter-spacing: .08em; line-height: 1.35; text-transform: none; }
.intro-grid .copy p { font-size: 15px; margin: 0 0 18px; max-width: 62ch; }
.intro-grid .copy p:last-child { margin-bottom: 0; }

/* FAQ accordion — native <details>/<summary>, zero JS, works with JS disabled */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; padding: 22px 0; font-family: 'Dosis', arial, sans-serif; font-size: 15px; letter-spacing: .04em; font-weight: 400; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; font-weight: 300; color: var(--gray); flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-a { padding: 0 0 22px; }
.faq-item .faq-a p { font-size: 14px; color: var(--ink-soft); margin: 0; max-width: 68ch; }

/* Long-form legal content (privacy policy, terms & conditions) — the block
   itself centers on the page (same max-width + margin:auto bug pattern as
   the eyebrow fixes above: no auto margins meant it sat flush-left in the
   wide .wrap), while the text inside it stays left-aligned, not centered. */
.legal-content { max-width: 72ch; margin: 0 auto; text-align: left; }
.legal-content h2 { font-size: 16px; letter-spacing: .12em; margin: 48px 0 16px; text-align: left; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { font-size: 15px; margin: 0 0 18px; max-width: 72ch; }
.legal-content ul { margin: 0 0 18px; padding-left: 22px; }
.legal-content li { font-size: 15px; padding: 3px 0; }

/* Why choose us — icon grid */
.why-grid { display: grid; gap: 50px 40px; grid-template-columns: 1fr; text-align: center; }
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-grid .icon { width: 34px; height: 34px; stroke: var(--ink); fill: none; stroke-width: 1.3; margin: 0 auto 22px; display: block; }
.why-grid h4 { font-size: 14px; letter-spacing: .2em; margin-bottom: 14px; }
.why-grid p { font-size: 14px; margin: 0 auto; }

/* Package / scope cards */
.pkg-grid { display: grid; gap: 0; grid-template-columns: 1fr; border: 1px solid var(--line); }
@media (min-width: 800px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); } }
.pkg-card { padding: 50px 36px; text-align: center; border-top: 1px solid var(--line); }
.pkg-grid .pkg-card:first-child { border-top: none; }
@media (min-width: 800px) {
  .pkg-card { border-top: none; border-left: 1px solid var(--line); }
  .pkg-grid .pkg-card:first-child { border-left: none; }
}
.pkg-card .eyebrow { margin-bottom: 8px; }
.pkg-card h3 { font-size: 22px; letter-spacing: .1em; margin-bottom: 28px; }
.pkg-card ul { list-style: none; padding: 0; margin: 0 0 32px; text-align: left; display: inline-block; }
.pkg-card li { font-size: 13px; letter-spacing: .03em; padding: 8px 0 8px 26px; position: relative; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.pkg-card li:last-child { border-bottom: none; }
.pkg-card li::before { content: ''; position: absolute; left: 0; top: 13px; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }

/* Contact */
.contact-grid { display: grid; gap: 60px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .8fr 1.2fr; } }
.contact-detail { margin-bottom: 28px; }
.contact-detail .eyebrow { margin-bottom: 6px; }
.contact-detail a, .contact-detail div { font-size: 15px; color: var(--ink); }
.form-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-family: 'Dosis', arial, sans-serif; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  /* 16px avoids iOS Safari auto-zooming the page when a field is focused */
  width: 100%; border: none; border-bottom: 1px solid var(--gray-light); padding: 12px 2px; font-family: inherit; font-size: 16px; background: transparent; min-height: 44px;
}
.field select { min-height: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 110px; }
.hp-field { position: absolute; left: -9999px; }

/* Footer */
.footer { background: var(--ink); color: rgba(255,255,255,.6); padding: 60px 0 30px; text-align: center; }
.footer img { height: 40px; margin: 0 auto 20px; filter: invert(1) brightness(2); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-bottom: 24px; font-family: 'Dosis', arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { font-size: 12px; letter-spacing: .05em; border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; margin-top: 10px; }

/* WhatsApp FAB */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: #1f7a4d; color: #fff; padding: 14px 20px; border-radius: 30px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 13px; letter-spacing: .05em; font-weight: 600;
}
.wa-fab svg { width: 20px; height: 20px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 2px; z-index: 100; transition: top .2s; }
.skip-link:focus { top: 12px; }
section[id] { scroll-margin-top: 90px; }