/* ==========================================================================
   Print Media Designing - 2026 refresh layer
   Loaded last, on every page. Deliberately additive: it re-tunes typography,
   rhythm, alignment and mobile behaviour on top of the existing Elementor
   output rather than replacing any of it, so no page content or SEO copy is
   disturbed.

   Sections
     1. Tokens
     2. Type system      (one scale instead of sixteen ad-hoc sizes)
     3. Rhythm + alignment
     4. Buttons + CTA band
     5. FAQ grid         (two columns, six a side)
     6. Footer           (service-area link map, contact block)
     7. Mobile repairs
   ========================================================================== */

:root {
  /* Brand blue is kept exactly as it is - it is the identity. What changes is
     everything around it: the greys were washed out, so body copy read dull and
     sections looked flat. Text contrast is raised well past WCAG AA and a real
     accent (the yellow already in the brand) is put to work. */
  --pm-brand: #5137FF;
  --pm-brand-ink: #3B22D9;   /* darker blue for text-on-white links */
  --pm-brand-deep: #2B1A8F;
  --pm-brand-wash: #F2F3FF;
  --pm-brand-tint: #E7E4FF;

  --pm-ink: #0F1222;         /* headings - near black, was #212529 */
  --pm-body: #333A4D;        /* body copy - was a washed #747171 */
  --pm-muted: #5B6376;       /* captions only, still AA on white */
  --pm-line: #E2E5F2;

  --pm-accent: #FFC531;      /* highlight yellow */
  --pm-accent-ink: #7A5300;
  --pm-hot: #FF5C7A;         /* sparingly, for badges */
  --pm-go: #1FA855;
  --pm-white: #fff;

  --pm-radius: 14px;
  --pm-radius-lg: 20px;
  --pm-shadow: 0 6px 20px rgba(23, 25, 35, .07);
  --pm-shadow-lg: 0 18px 44px rgba(81, 55, 255, .16);

  /* One scale, fluid between mobile and desktop.
     Sized DOWN from the first pass after the client said everything had grown.
     Measured against the original site at 1440px: h1 was 40, h2 30, h3 18,
     body 16. The first pass pushed h3 to 23px - and h3 appears 37 times on the
     homepage, so that one number is most of what "sab kuch bada ho gaya" was
     about. These land at or just under the original figures. */
  --pm-display: clamp(29px, 3.9vw, 44px);
  --pm-h1: clamp(27px, 3.2vw, 40px);
  --pm-h2: clamp(22px, 2.2vw, 29px);
  --pm-h3: clamp(17px, 1.35vw, 19px);
  --pm-h4: 17px;
  --pm-text: 16px;
  --pm-small: 14.5px;

  /* Headings use Oswald, the display face from the gym site the client
     pointed at. It is condensed, so a heading occupies noticeably less width
     than the previous face did at the same pixel size - which is the other
     half of making things feel smaller. Body copy stays Inter. */
  --pm-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pm-head: "Oswald", "Arial Narrow", "Inter", "Helvetica Neue", Arial, sans-serif;

  --pm-gap: clamp(28px, 4vw, 64px);
}

/* --------------------------------------------------------------- 2. type -- */

body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
p, li {
  font-family: var(--pm-sans);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-icon-box-title,
.elementor-image-box-title,
.elementor-testimonial-name,
.elementor-accordion-title,
.elementor-toggle-title {
  font-family: var(--pm-head) !important;
  /* Oswald is condensed, so the negative tracking the previous face wanted
     would close it up too far. A hair of positive tracking keeps sentence-case
     headings readable. */
  letter-spacing: .004em;
  text-wrap: balance;
}

/* Body copy: the old 15px/1.5 read cramped on long paragraphs.
   Size and leading only - deliberately NOT colour. Sections here sit on white,
   on pale lavender and on black, and the page already picks the right ink for
   each. Repainting text globally turned six items on dark backgrounds into
   near-invisible dark-on-dark, so colour is left to the page. */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-size: var(--pm-text) !important;
  line-height: 1.72 !important;
}

/* One hierarchy. Sizes and leading only - colour stays as the page set it.
   Oswald sits tall in its line box, so headings get slightly more leading than
   a normal sans would need. */
h1, .elementor-widget-heading h1.elementor-heading-title { font-size: var(--pm-h1) !important; line-height: 1.18 !important; font-weight: 600 !important; }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: var(--pm-h2) !important; line-height: 1.24 !important; font-weight: 600 !important; }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: var(--pm-h3) !important; line-height: 1.36 !important; font-weight: 500 !important; }
h4, .elementor-widget-heading h4.elementor-heading-title { font-size: var(--pm-h4) !important; line-height: 1.45 !important; font-weight: 500 !important; }

/* h5/h6 were being used as paragraphs in a few content sections. Stop them
   looking like headings without touching the markup (which carries SEO copy).
   Colour is left alone for the same reason as above. */
h5.elementor-heading-title,
h6.elementor-heading-title {
  font-family: var(--pm-sans) !important;
  font-size: var(--pm-text) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: normal;
}

/* ...but in the footer those same tags are real column headings. Restore the
   exact treatment the live site had: 18px, bold, white. */
footer h5.elementor-heading-title,
footer h6.elementor-heading-title {
  font-family: var(--pm-head) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
footer .elementor-widget-text-editor,
footer .elementor-widget-text-editor p {
  font-size: 16px !important;
}

/* Nothing below 13px - 11.05px was unreadable and fails mobile legibility. */
.elementor-element,
.elementor-element * {
  font-size: max(13px, 1em);
}

/* Hero lockup */
.pm-hero-title,
h1.elementor-heading-title.pm-display { font-size: var(--pm-display) !important; }

a { text-underline-offset: .18em; }

/* ------------------------------------------------- 2b. colour presence ----
   Measured on the live homepage: out of 169 text nodes, the brand blue was
   used on exactly 3. Everything else was black on white, which is what reads
   as "dull" - the palette was fine, the brand was simply absent. These rules
   put the blue and the accent yellow back to work without repainting content.
   -------------------------------------------------------------------------- */

/* Small uppercase label that sits above a section heading. */
.pm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pm-brand-tint);
  color: var(--pm-brand-deep);
  font-family: var(--pm-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
}
.pm-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pm-brand);
}

/* Emphasis inside headings: blue word, or a yellow highlighter sweep. */
.pm-hl { color: var(--pm-brand); }
.pm-mark {
  background: linear-gradient(transparent 62%, var(--pm-accent) 62%);
  padding: 0 .12em;
}

/* Headings were near-black across the board. Give h2 the ink colour but let a
   leading accent bar carry the brand. */
.pm-section-head h2::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin: 14px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pm-brand), var(--pm-accent));
}

/* The "20+ Years Of Experience" stat sat underneath an absolutely-positioned
   product photo (z-index:1), so it read "20" / "Yea..." with the rest hidden
   behind the picture. Pre-existing - the original screenshot shows "18" cut
   the same way - but the client spotted it, so: lift it above the photo and
   give it a card, which turns an accident into a deliberate floating badge. */
.elementor-widget-counter.printbe-counter-layout-1 {
  position: relative;
  z-index: 3;
}
.elementor-widget-counter.printbe-counter-layout-1 > .elementor-widget-container {
  display: inline-block;
  padding: 14px 26px 12px;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-lg);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 10px 30px rgba(23, 25, 35, .12);
}
.elementor-widget-counter.printbe-counter-layout-1 .elementor-counter-title {
  white-space: nowrap;
}
.elementor-widget-counter.printbe-counter-layout-1 .elementor-counter-number-wrapper {
  white-space: nowrap;
  line-height: 1.05;
}

/* Flat blocks -> cards with a real edge and a little depth. */
.pm-card {
  background: #fff;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-shadow);
  padding: clamp(18px, 2vw, 26px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-card:hover {
  transform: translateY(-3px);
  border-color: #C9BFFF;
  box-shadow: var(--pm-shadow-lg);
}

/* Links inside running prose: visible, branded, underlined.
   Deliberately NOT "every link in <main>" - that version underlined blog post
   titles and card headings, which are links but are not prose. Scoped to the
   places that actually contain sentences. */
.elementor-widget-text-editor a,
.pm-prose__body a,
.pm-faq__a a {
  color: var(--pm-brand-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .16em;
}
.elementor-widget-text-editor a:hover,
.pm-prose__body a:hover { color: var(--pm-brand); }

/* List markers in content were default black discs. */
.elementor-widget-text-editor ul { padding-left: 1.15em; }
.elementor-widget-text-editor ul li::marker { color: var(--pm-brand); }

/* ---------------------------------------------------- 3. rhythm + align --- */

/* Section headings were mixed: some centred, some left, at three different
   sizes. Give every section heading the same treatment so the page reads as
   one document. */
.pm-section-head {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: clamp(20px, 2.6vw, 36px);
}
.pm-section-head h2 { margin: 0 0 10px; color: var(--pm-ink); }
.pm-section-head p  { margin: 0; color: var(--pm-muted); font-size: var(--pm-text); line-height: 1.7; }

/* "Explore Our Latest Design Collection" sat left while its neighbours were
   centred, and wrapped after two words. */
.elementor-widget-heading .elementor-heading-title { text-wrap: balance; }

/* Consistent vertical breathing room between top-level sections. */
main > .elementor > .e-con.e-parent,
.elementor-location-single > .elementor > .e-con.e-parent {
  padding-block: clamp(38px, 4.6vw, 74px);
}

/* Carousels were bleeding past both edges of the viewport, so the first and
   last card looked sliced off rather than "more to come". */
.swiper, .printbe-swiper, .elementor-testimonial-item-wrapper { overflow: hidden; }

/* The testimonial carousel's widget container carries margin:-85px/-165px,
   which at 1440px makes it 1690px wide starting at x=-92 - so the first
   reviewer's name reads "esh Patil" instead of "Rakesh Patil". Selected by
   what it contains rather than by element id, so it keeps working if the
   section is rebuilt in Elementor. */
.elementor-widget-container:has(> .elementor-testimonial-item-wrapper) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* grid/flex children default to min-width:auto and refuse to shrink */
.e-con-inner > *, .elementor-widget-container > * { min-width: 0; }

/* -------------------------------------------------- 4. buttons + CTA band - */

.pm-btn {
  --_bg: var(--pm-brand);
  --_fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  min-height: 48px;
  border: 1.5px solid var(--_bg);
  border-radius: 999px;
  background: var(--_bg);
  color: var(--_fg) !important;
  font-family: var(--pm-head);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pm-btn:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-lg); }
.pm-btn:focus-visible { outline: 3px solid var(--pm-accent); outline-offset: 3px; }
.pm-btn--ghost { --_bg: transparent; --_fg: var(--pm-brand); border-color: var(--pm-brand); }
.pm-btn--ghost:hover { background: var(--pm-brand); --_fg: #fff; }
.pm-btn--wa { --_bg: #1FA855; border-color: #1FA855; }
.pm-btn--light { --_bg: #fff; --_fg: var(--pm-brand); border-color: #fff; }
.pm-btn svg { width: 18px; height: 18px; flex: none; }

/* The enquiry band that now closes every page. */
.pm-cta {
  background: linear-gradient(135deg, #4A2FF0 0%, #6B4BFF 52%, #8A6BFF 100%);
  color: #fff;
  padding: clamp(34px, 4.4vw, 62px) 20px;
}
.pm-cta__inner {
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
}
.pm-cta__copy { flex: 1 1 460px; min-width: 0; }
.pm-cta h2 {
  font-family: var(--pm-head);
  font-size: clamp(23px, 2.5vw, 33px) !important;
  line-height: 1.18 !important;
  margin: 0 0 10px;
  color: #fff !important;
  letter-spacing: -.02em;
}
.pm-cta p { margin: 0; color: rgba(255,255,255,.9); font-size: var(--pm-text); line-height: 1.65; }
.pm-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 1 auto; }
.pm-cta__note {
  /* it is a flex item of .pm-cta__actions, so display:block alone left it
     sitting beside the buttons; this forces its own row underneath them */
  flex: 1 0 100%;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}

/* ------------------------------------------- 4b. new-page building blocks -
   Used by the pages built from content/*.json (services hub, advertising
   agency). Same tokens as everything above, so a new page cannot drift away
   from the rest of the site.
   -------------------------------------------------------------------------- */

.pm-page { display: block; }
.pm-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
.pm-band { padding-block: clamp(40px, 5vw, 78px); background: #fff; }
.pm-band--wash { background: var(--pm-brand-wash); }

/* hero */
.pm-hero {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(81,55,255,.16), transparent 60%),
    radial-gradient(760px 380px at 92% 0%, rgba(255,197,49,.20), transparent 62%),
    var(--pm-brand-wash);
  padding-block: clamp(44px, 6vw, 92px);
  border-bottom: 1px solid var(--pm-line);
}
.pm-hero__title {
  font-family: var(--pm-head) !important;
  font-size: var(--pm-display) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -.028em;
  color: var(--pm-ink);
  margin: 0 0 16px;
  max-width: 17ch;
}
.pm-hero__sub {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.68;
  color: var(--pm-body);
}
.pm-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pm-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 28px 0 0; padding: 0;
}
.pm-chips li {
  padding: 7px 14px;
  border: 1px solid var(--pm-brand-tint);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pm-brand-deep);
}

/* prose */
.pm-prose__body { max-width: 74ch; margin-inline: auto; }
.pm-prose__body p { margin: 0 0 18px; font-size: var(--pm-text); line-height: 1.75; color: var(--pm-body); }
.pm-prose__body p:last-child { margin-bottom: 0; }
.pm-prose__body strong { color: var(--pm-ink); }
.pm-prose__body a { color: var(--pm-brand-ink); font-weight: 600; }
.pm-section-head--left { text-align: left; margin-inline: 0; max-width: 74ch; }
.pm-section-head--left h2::after { margin-inline: 0; }

/* card grid */
.pm-grid { display: grid; gap: clamp(14px, 1.7vw, 22px); }
.pm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-grid > * { min-width: 0; }
.pm-card h3 {
  margin: 0 0 9px;
  font-family: var(--pm-head) !important;
  font-size: var(--pm-h3) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  color: var(--pm-ink);
}
.pm-card p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--pm-body); }
.pm-card__meta {
  display: inline-block;
  margin-top: 14px !important;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--pm-brand-wash);
  border: 1px solid var(--pm-brand-tint);
  font-size: 12.5px !important;
  font-weight: 700;
  color: var(--pm-brand-deep) !important;
  letter-spacing: .01em;
}
.pm-card__link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--pm-head);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pm-brand-ink);
  text-decoration: none;
}
.pm-card__link::after { content: " \2192"; }
.pm-card__link:hover { text-decoration: underline; }

/* numbered steps */
.pm-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  counter-reset: pmstep;
  max-width: 900px; margin-inline: auto;
}
.pm-steps li {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--pm-line);
  border-left: 4px solid var(--pm-brand);
  border-radius: var(--pm-radius);
  padding: 18px 22px;
  box-shadow: var(--pm-shadow);
}
.pm-step__n {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pm-brand);
  color: #fff;
  font-family: var(--pm-head);
  font-size: 15px; font-weight: 800;
}
.pm-steps h3 {
  margin: 3px 0 6px;
  font-family: var(--pm-head) !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  color: var(--pm-ink);
}
.pm-steps p { margin: 0; font-size: 15.5px; line-height: 1.66; color: var(--pm-body); }

/* link map (on-page, light background - distinct from the footer one) */
.pm-linkmap { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pm-linkgroup__label {
  margin: 0 0 10px;
  font-family: var(--pm-head);
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--pm-brand-deep);
}
.pm-linkgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pm-linkgroup a {
  font-size: 14.5px; line-height: 1.5;
  color: var(--pm-body); text-decoration: none;
  padding: 3px 0; display: block;
}
.pm-linkgroup a:hover { color: var(--pm-brand); text-decoration: underline; }

@media (max-width: 980px) {
  .pm-grid--3, .pm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pm-grid--2, .pm-grid--3, .pm-grid--4 { grid-template-columns: 1fr; }
  .pm-hero__title { max-width: none; }
  .pm-hero__actions .pm-btn { flex: 1 1 100%; }
  .pm-steps li { gap: 13px; padding: 15px 16px; }
}

/* ------------------------------------------------- 4c. homepage hero -------
   The five banners are now real links (fix18). They stack absolutely on top of
   one another, so without help every click would land on whichever is last in
   the DOM rather than the one on screen.
   -------------------------------------------------------------------------- */

.simple-slider .pm-hero-link {
  position: absolute;
  inset: 0;
  display: block;
}
.simple-slider .pm-hero-link img { position: absolute; top: 0; left: 0; }

/* Only the slide that is actually visible should take the click. Gated on
   :has() support so that in a browser without it every link stays clickable -
   which is no worse than the five dead banners we started from. */
@supports selector(:has(*)) {
  .simple-slider .pm-hero-link { pointer-events: none; }
  .simple-slider .pm-hero-link:has(img.active) { pointer-events: auto; z-index: 2; }
}

/* On mobile the container was 250px tall while the banner is 2.75:1, so
   object-fit:cover threw away ~265px of width - and the headline lives in the
   part it threw away. Match the container to the artwork instead. */
/* !important is needed here, and only here: the page carries six inline
   <style> blocks in the body that load after this file, and one of them sets
   ".simple-slider, .simple-slider img { height: 250px }" at the same
   specificity. Later in the document wins, so an ordinary rule loses. */
@media (max-width: 768px) {
  .simple-slider { height: auto !important; aspect-ratio: 1928 / 701; }
  .simple-slider img { height: 100% !important; object-fit: contain !important; }
}

/* ------------------------------------------------------- 4c2. article body -
   One column, one background, a measure you can actually read a paragraph in.
   -------------------------------------------------------------------------- */

.pm-article {
  max-width: 74ch;
  margin-inline: auto;
}
.pm-article h2 {
  margin: clamp(30px, 3.4vw, 44px) 0 12px;
  font-size: clamp(20px, 1.9vw, 24px) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: var(--pm-ink);
  scroll-margin-top: 90px;
}
.pm-article h2:first-child { margin-top: 0; }
.pm-article h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pm-brand), var(--pm-accent));
}
.pm-article p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--pm-body);
}
.pm-article p:last-child { margin-bottom: 0; }
.pm-article strong { color: var(--pm-ink); font-weight: 600; }
.pm-article a { color: var(--pm-brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .16em; }

/* ------------------------------------------------ 4c3. our-work copy block -
   Sits under the image grid on a portfolio page, so the work still leads.
   -------------------------------------------------------------------------- */

.pm-work-copy {
  max-width: 1320px;
  margin: clamp(34px, 4vw, 56px) auto 0;
  padding-top: clamp(28px, 3vw, 42px);
  border-top: 1px solid var(--pm-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.pm-work-copy .pm-article { max-width: 70ch; margin-inline: 0; }
.pm-work-copy__links {
  position: sticky;
  top: 96px;
  background: var(--pm-brand-wash);
  border: 1px solid var(--pm-brand-tint);
  border-radius: var(--pm-radius-lg);
  padding: 20px 22px;
}
.pm-work-copy__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pm-work-copy__links a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pm-brand-ink);
  text-decoration: none;
  line-height: 1.45;
  display: block;
}
.pm-work-copy__links a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .pm-work-copy { grid-template-columns: 1fr; }
  .pm-work-copy__links { position: static; }
}

/* --------------------------------------------------------- 4d. blog index -
   The old listing was a plain 3-up grid with the owner's email address as the
   byline and "Comments Off" beside it on every card. This is a lead card plus
   a topic-filtered grid.
   -------------------------------------------------------------------------- */

.pm-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin: 0 0 clamp(22px, 3vw, 34px);
}
.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--pm-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--pm-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pm-body);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pm-chip span {
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pm-brand-wash);
  color: var(--pm-brand-deep);
}
.pm-chip:hover { border-color: #C9BFFF; color: var(--pm-brand-deep); }
.pm-chip.is-on { background: var(--pm-brand); border-color: var(--pm-brand); color: #fff; }
.pm-chip.is-on span { background: rgba(255,255,255,.22); color: #fff; }

.pm-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.pm-posts > * { min-width: 0; }

.pm-post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
  box-shadow: var(--pm-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pm-post:hover { transform: translateY(-3px); border-color: #C9BFFF; box-shadow: var(--pm-shadow-lg); }
/* The post artwork ranges from 0.90 to 2.40 in aspect and has headline text
   baked into the picture, so no single crop fits them: "CATALOGUE PRINTING"
   was rendering as "TALOGUE INTING". object-fit:contain shows every graphic
   whole, on the brand wash, and nothing loses a word. */
.pm-post__media {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--pm-brand-wash);
  overflow: hidden;
}
.pm-post__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 10px;
  transition: transform .35s ease;
}
.pm-post:hover .pm-post__media img { transform: scale(1.02); }
.pm-post__body { padding: 17px 19px 19px; display: flex; flex-direction: column; flex: 1; }
.pm-post__tag {
  align-self: flex-start;
  margin-bottom: 9px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pm-brand-wash);
  border: 1px solid var(--pm-brand-tint);
  font-family: var(--pm-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pm-brand-deep);
}
.pm-post h3 { margin: 0 0 8px; font-size: 18px !important; line-height: 1.32 !important; font-weight: 600 !important; }
.pm-post h3 a { color: var(--pm-ink); text-decoration: none; }
.pm-post:hover h3 a { color: var(--pm-brand); }
.pm-post p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.62; color: var(--pm-body); }
.pm-post__more {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--pm-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-brand-ink);
  text-decoration: none;
  letter-spacing: .01em;
}
.pm-post__more::after { content: " \2192"; }
.pm-post__more:hover { text-decoration: underline; }

/* the first post gets the full width and reads as the lead story */
.pm-post--lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}
/* Keep the artwork's own proportions on the lead card. Letting it stretch to
   the card height cover-cropped a 3:2 graphic into a tall box and sliced the
   headline off the picture. */
.pm-post--lead .pm-post__media { flex: 0 0 46%; aspect-ratio: 3 / 2; align-self: stretch; }
.pm-post--lead .pm-post__media img { object-position: center; }
.pm-post--lead .pm-post__body { justify-content: center; padding: clamp(20px, 3vw, 38px); }
.pm-post--lead h3 { font-size: clamp(21px, 2.1vw, 27px) !important; line-height: 1.24 !important; }
.pm-post--lead p { font-size: 15.5px; max-width: 56ch; }

/* The nine new articles have no artwork. Rather than leave a hole where the
   picture goes, a card without an image gets a little more room and a rule,
   so a mixed grid still reads as one grid. */
.pm-post:not(:has(.pm-post__media)) .pm-post__body { padding-top: 22px; }
.pm-post:not(:has(.pm-post__media))::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--pm-brand), var(--pm-accent));
}

.pm-posts__empty { text-align: center; color: var(--pm-muted); margin-top: 26px; }

@media (max-width: 1024px) { .pm-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pm-posts { grid-template-columns: 1fr; }
  .pm-post--lead { flex-direction: column; }
  .pm-post--lead .pm-post__media { flex: none; aspect-ratio: 410 / 280; }
  .pm-chips-row { justify-content: flex-start; }
}

/* ------------------------------------------------------------ 5. FAQ grid - */

.pm-faq { max-width: 1180px; margin-inline: auto; padding: 0 20px; }
.pm-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
  align-items: start;
}
.pm-faq details {
  background: #fff;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pm-faq details[open] { border-color: #C9BFFF; box-shadow: 0 10px 30px rgba(81,55,255,.13); }
.pm-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  font-family: var(--pm-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.42;
  color: var(--pm-ink);
}
.pm-faq summary::-webkit-details-marker { display: none; }
.pm-faq summary::after {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--pm-plus) center/20px no-repeat;
          mask: var(--pm-plus) center/20px no-repeat;
  transition: transform .2s ease;
}
.pm-faq details[open] summary { color: var(--pm-brand); }
.pm-faq details[open] summary::after { transform: rotate(45deg); }
.pm-faq__a {
  padding: 0 20px 18px;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--pm-body);
}
.pm-faq__a a { color: var(--pm-brand); font-weight: 600; }
:root {
  --pm-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- 6. footer -- */

.pm-areas {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(24px, 3vw, 36px);
}
.pm-areas__title {
  font-family: var(--pm-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 6px;
}
.pm-areas__sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
  margin: 0 0 18px;
  max-width: 720px;
}
.pm-areas__group + .pm-areas__group { margin-top: 20px; }
.pm-areas__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pm-accent);
  margin: 0 0 9px;
}
.pm-areas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 7px 22px;
}
.pm-areas__list a {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.74);
  text-decoration: none;
  padding: 2px 0;
  transition: color .15s ease;
}
.pm-areas__list a:hover { color: #fff; text-decoration: underline; }

/* long email / phone strings were breaking mid-word in the contact column */
.pm-nowrap, footer a[href^="mailto:"], footer a[href^="tel:"] {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

/* ------------------------------------------------------ 7. mobile repairs - */

@media (max-width: 1024px) {
  .pm-faq__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .pm-cta__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .pm-cta__actions { width: 100%; }
  .pm-cta__actions .pm-btn { flex: 1 1 auto; }
  .pm-areas__list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* Some absolutely-placed decorative blocks were parked outside the viewport,
     taking real paragraphs with them. Bring stray content back in flow. */
  .e-con-inner, .elementor-widget-container { max-width: 100%; }
  .elementor-element[class*="elementor-element-"] > .elementor-widget-container > img,
  .elementor-widget-image img { max-width: 100%; height: auto; }

  /* Tap targets. min-height does nothing on an inline <a>, which is why the
     footer link columns stayed 21px tall; they need to be inline-block with
     real vertical padding to reach a thumb-sized target. */
  footer a,
  .elementor-nav-menu a {
    display: inline-block;
    padding-block: 6px;
    min-height: 26px;
  }
  .pm-areas__list a { padding: 6px 0; }
  /* the social icon row is already a flex row of sized buttons - leave it */
  footer .elementor-social-icon { padding-block: 0; }

  /* Service carousel card titles are inline links inside an h4, so they came
     out 21px tall. inline-block keeps them in flow while giving a thumb
     something to hit. */
  .service-loop-title a { display: inline-block; padding-block: 4px; }
}

/* ------------------------------------------------- 8. reveal fail-safe -----
   Elementor's entrance animations work by putting .elementor-invisible
   (visibility:hidden) on a section and having JavaScript take it off when the
   section scrolls into view. On this homepage that covers eight sections and
   about 3,600px of content - the USP row, "Explore Our Latest Design
   Collection", the bulk-quantity band, "Why Choose Us" and the 3000+ stat.

   For a normal visitor that is fine: they cannot see those sections until they
   scroll, and the reveal fires on the way. But if the script is slow, blocked,
   or fails, the page keeps a third of itself permanently invisible - and the
   visitor sees blank white bands with no idea anything is missing.

   This reveals anything still hidden after three seconds. If the animation
   does fire, it fires long before this and nothing changes.
   -------------------------------------------------------------------------- */

/* A zero-duration animation did not reliably hold its forwards fill, so this
   uses a real (if tiny) duration. visibility interpolates discretely, so it
   simply flips. */
@keyframes pm-reveal-failsafe {
  from { visibility: hidden; }
  to   { visibility: visible; }
}

.elementor-invisible {
  animation: pm-reveal-failsafe 0.01s linear 3s forwards;
}

/* Someone who has asked for less motion should not be waiting on an animation
   at all - show everything immediately. */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible { visibility: visible !important; animation: none; }
  .pm-btn, .pm-faq details, .pm-faq summary::after { transition: none; }
  .pm-btn:hover { transform: none; }
}