/* ==========================================================================
   MK Recycling - static clone of https://www.mkrecycling.net (Wix source)
   Shared design system: tokens, shared header/nav, shared footer, motion,
   and the shared primitives every page reuses.

   OWNED BY THE ORCHESTRATOR. Page subagents append page-scoped rules to the
   END of this file only, each under a banner comment reading "page:" plus the
   page slug. Nothing above the APPEND ZONE marker may be edited.

   Fonts are loaded with a stylesheet link tag in every page head, never from
   here, so each page still renders correctly on its own.
   ========================================================================== */

:root {
  /* Palette lifted verbatim from the source theme (Wix --color_NN tokens) */
  --green: #38761d;            /* color_41 / color_18 - primary brand green */
  --green-dark: #153606;       /* footer band */
  --green-deep: #2b5336;       /* color_34 */
  --gold: #ffd866;             /* color_42 - logo, header CTA, bottom bar */
  --gold-bright: #fff86b;      /* the "Get a Touch" button on the green band */
  --amber: #fbb03b;            /* footer contact icon circles */
  --header-bg: #383838;        /* black at 78% over white, as the source computes */
  --dark: #252525;             /* color_43 */
  --black: #000000;            /* color_37 / color_2 */
  --white: #ffffff;            /* color_36 / color_11 */
  --text: #000000;
  --text-muted: #595959;       /* color_14 / color_40 */
  --text-on-dark: #ffffff;
  --line: #c7c7c7;             /* color_13 / color_39 */
  --line-soft: #e8e6e6;        /* color_12 */
  --input-border: #b0b0b0;

  /* Type. The source is set in Wix Madefor (Madefor Display Extrabold for
     headings, Madefor Text for body). Figtree is the closest Google Fonts
     face and is used in its place; Roboto, Poppins and Open Sans appear in
     the source directly and are kept as-is. */
  --font-display: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-roboto: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-poppins: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-opensans: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-h1: 58px;
  --fs-h2: 40px;
  --fs-h3: 30px;
  --fs-h5: 25px;
  --fs-h6: 22px;
  --fs-body: 16px;
  --fs-small: 14px;

  /* Spacing rhythm and shape */
  --container: 1040px;
  --gap: 24px;
  --space-section: 96px;
  --radius: 5px;
  --radius-card: 10px;
  --shadow-card: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  --shadow-soft: 0 2px 12px 0 rgba(0, 0, 0, 0.12);

  /* Motion, ported from the source's motion-floatIn entrance */
  --ease-float: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --dur-float: 1200ms;

  /* Per-band photo opacity; each photo band overrides this inline with the
     value the source composites that photo at. */
  --band-img-opacity: 1;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

img,
svg { border: 0; }

img { max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 800; }

h1 { font-size: var(--fs-h1); line-height: 1.11em; }
h2 { font-size: var(--fs-h2); line-height: 1.31em; }
h3 { font-size: var(--fs-h3); line-height: 1.4em; }
h5 { font-size: var(--fs-h5); line-height: 1.4em; }
h6 { font-size: var(--fs-h6); line-height: 1.4em; }

p { margin: 0 0 1em; }

p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--black);
  padding: 10px 16px;
  z-index: 200;
}

.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section { position: relative; padding: var(--space-section) 0; }

.section-inner { position: relative; z-index: 2; }

.band-white { background: var(--white); }
.band-green { background: var(--green); color: var(--text-on-dark); }
.band-dark { background: var(--dark); color: var(--text-on-dark); }

/* A full-bleed photo band. The source composites the photo at a set opacity
   over a solid black fill, so the clone does the same: solid black on the
   band, the photo as a real absolutely-positioned img with an explicit
   width AND height so the replaced element actually fills the band. */
.band-photo {
  position: relative;
  background: var(--black);
  overflow: hidden;
  color: var(--text-on-dark);
}

.band-photo > .band-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: var(--band-img-opacity, 1);
  z-index: 0;
  pointer-events: none;
}

.band-photo > .band-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Shared text bits
   -------------------------------------------------------------------------- */

/* The small label above each section heading, followed by a short rule.
   Green on light bands, gold on dark/photo bands, exactly as the source. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--green);
}

.eyebrow::after {
  content: "";
  flex: 0 0 74px;
  height: 1px;
  background: currentColor;
}

.eyebrow--center { justify-content: center; }

.eyebrow--center::before {
  content: "";
  flex: 0 0 74px;
  height: 1px;
  background: currentColor;
  order: -1;
}

.eyebrow--gold { color: var(--gold); }

.lede { color: var(--text-muted); line-height: 1.6; }

.on-dark .lede,
.band-photo .lede,
.band-green .lede { color: rgba(255, 255, 255, 0.88); }

.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-white { color: var(--white); }

/* --------------------------------------------------------------------------
   Buttons - fill, radius and hover swap copied from the source
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  min-width: 196px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn-green {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.btn-green:hover,
.btn-green:focus {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.btn-gold:hover,
.btn-gold:focus {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* The brighter yellow pill on the green "Did you know" band */
.btn-gold-bright {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  border-radius: 7px;
  color: var(--black);
}

.btn-gold-bright:hover,
.btn-gold-bright:focus {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.btn-chevron { display: inline-flex; width: 9px; }

.btn-chevron svg { width: 100%; height: auto; fill: currentColor; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.card-pad { padding: 22px; }

/* --------------------------------------------------------------------------
   Shared header and nav
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 50;
  background: var(--header-bg);
}

/* The source header and footer are NOT constrained to the content container -
   they span almost the full viewport with roughly 45px (header) and 190px
   (footer) gutters. Measured off shot.png: brand text 75-215, active nav item
   from 590, CTA button 1683-1879 on a 1920-wide capture. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
  padding: 26px 45px;
}

/* The source gives the inner pages a much taller header band (253px against
   the home page's 125px), with the nav sitting at the top of it. */
.pg-blog .header-inner,
.pg-post .header-inner {
  align-items: flex-start;
  min-height: 253px;
  padding-top: 22px;
  padding-bottom: 0;
}

.brand {
  flex: 0 0 218px;
  max-width: 218px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.2;
  color: var(--gold);
  text-align: center;
}

.brand:hover { color: var(--white); }

.site-nav { flex: 1 1 auto; }

.site-nav > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 10px 7px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--white);
  transition: color 0.2s;
}

.site-nav a:hover,
.site-nav a:focus { color: var(--gold); }

.site-nav a.is-current { color: var(--gold); }

/* The source menu is a single level - it has no dropdown or flyout items, so
   there is no submenu to reproduce and no submenu rule here. Adding a
   speculative one would mean shipping an opacity-0 rule that can hide real
   content, which this stylesheet never does. */
.site-nav li { position: relative; }

.header-cta { flex: 0 0 auto; padding: 11px 22px; }

/* --------------------------------------------------------------------------
   Shared footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--green-dark); color: var(--white); }

.footer-main {
  display: grid;
  grid-template-columns: 747fr 533fr 260fr;
  gap: 0;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 72px 10px 64px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--gold);
  display: block;
  margin-bottom: 26px;
}

.footer-brand:hover { color: var(--white); }

.footer-blurb { font-size: var(--fs-body); line-height: 1.7; color: var(--white); }

.footer-heading {
  margin: 0 0 14px;
  font-family: var(--font-roboto);
  font-size: var(--fs-h5);
  font-weight: 700;
  color: var(--white);
}

.footer-links { list-style: none; }

.footer-links li { line-height: 2; }

.footer-links a { color: var(--white); transition: color 0.2s; }

.footer-links a:hover,
.footer-links a:focus { color: var(--gold); }

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--amber);
}

.icon-circle svg { width: 17px; height: 17px; fill: var(--green-dark); }

.icon-circle--green { background: var(--green); }

.icon-circle--green svg { fill: var(--white); }

.footer-contact-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4em;
  color: var(--white);
}

.footer-contact-value { font-size: var(--fs-body); line-height: 1.4em; color: var(--white); }

.footer-contact-value a:hover { color: var(--gold); }

.footer-social { display: flex; gap: 12px; list-style: none; margin-top: 22px; }

.footer-social img { display: block; width: 28px; height: 28px; }

.footer-bar {
  background: var(--gold);
  color: var(--black);
  padding: 14px 20px;
  text-align: center;
  font-family: var(--font-opensans);
  font-size: var(--fs-body);
  line-height: 1.4em;
}

/* --------------------------------------------------------------------------
   Forms - wired to the Apex relay as a plain HTML post, no JavaScript
   -------------------------------------------------------------------------- */

.apex-form { display: block; }

.form-card {
  background: var(--white);
  border-radius: 2px;
  box-shadow: var(--shadow-soft);
  padding: 30px 28px;
}

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.field { margin-bottom: 18px; }

.field label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: 13px;
  color: #4a4a4a;
}

.field .req { color: #4a4a4a; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--input-border);
  border-radius: 2px;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  transition: border-color 0.2s;
}

.field textarea { min-height: 96px; resize: vertical; }

.field input:focus,
.field textarea:focus { border-color: var(--green); outline: none; }

/* Honeypot: off-screen, never display:none, so bots still fill it in but no
   human ever sees it. The relay silently drops any post that has it set. */
.hp-wrap {
  position: absolute;
  left: -9999px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}

.form-submit { min-width: 131px; padding: 10px 26px; font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   Blog / post shared chrome
   -------------------------------------------------------------------------- */

.blog-subbar {
  border-bottom: 1px solid var(--line-soft);
  background: var(--white);
}

.blog-subbar-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px 20px;
}

.blog-subbar a,
.blog-subbar span.blog-tab {
  font-size: var(--fs-small);
  color: #333;
}

.blog-subbar .blog-tab.is-current { font-weight: 600; }

.blog-subbar .blog-search { margin-left: auto; display: inline-flex; color: #333; }

.blog-subbar .blog-search svg { width: 16px; height: 16px; fill: currentColor; }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.post-card-media { display: block; position: relative; aspect-ratio: 292 / 219; background: var(--line-soft); }

.post-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.post-card-body { padding: 16px 18px 12px; }

.post-card-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--black);
}

.post-card-title a:hover { color: var(--green); }

.post-card-excerpt {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: #5c5c5c;
}

.post-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6a6a6a;
}

.post-meta-row .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--line-soft);
  flex: 0 0 auto;
}

.post-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px 14px;
  margin-top: auto;
  font-size: 12px;
  color: #6a6a6a;
}

.post-stats .stat { display: inline-flex; align-items: center; gap: 5px; }

.post-stats svg { width: 14px; height: 14px; fill: currentColor; }

.post-stats .like { margin-left: auto; color: #e0b0b0; }

/* --------------------------------------------------------------------------
   Motion
   Ported from the source's motion-floatIn entrance (translate 60px up plus a
   fade, 1200ms, cubic-bezier(0.445, 0.05, 0.55, 0.95)) which the source runs
   on 15 components, plus its button colour transitions and a looping accent.

   Deliberately NOT hidden from CSS: the animation is applied directly to the
   element with animation-fill-mode both, so it always runs and always ends
   visible. The optional script in each page only PAUSES it once an
   IntersectionObserver is attached, and a hard timeout resumes everything
   regardless, so no failure path can leave real copy invisible.
   -------------------------------------------------------------------------- */

@keyframes float-in {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop-in {
  0% { transform: scale(0.1); }
  40% { transform: scale(1.3); }
  70% { transform: scale(0.9); }
  90% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.35; }
  60% { opacity: 1; }
}

[data-animate] {
  animation: float-in var(--dur-float) var(--ease-float) both;
}

[data-animate="fade"] {
  animation: fade-in 500ms ease both;
}

[data-animate="pop"] {
  animation: pop-in 500ms ease both;
}

[data-animate-delay="1"] { animation-delay: 120ms; }
[data-animate-delay="2"] { animation-delay: 240ms; }
[data-animate-delay="3"] { animation-delay: 360ms; }
[data-animate-delay="4"] { animation-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-animate],
  [data-animate="fade"],
  [data-animate="pop"] {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 30px;
    --space-section: 64px;
  }

  .header-inner { flex-wrap: wrap; justify-content: center; padding: 14px 20px; }
  .pg-blog .header-inner,
  .pg-post .header-inner { align-items: center; min-height: 0; padding: 14px 20px; }
  .btn { min-width: 0; }
  .brand { flex: 0 0 auto; max-width: none; }
  .site-nav { flex: 1 1 100%; order: 3; }
  .site-nav > ul { gap: 2px; flex-wrap: wrap; }
  .site-nav a { padding: 8px 6px; font-size: 12px; }
  .footer-main { grid-template-columns: 1fr; gap: 34px; padding: 52px 20px 44px; }
  .footer-brand { font-size: 44px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   APPEND ZONE - page-scoped rules only, below this line.
   ========================================================================== */

/* page: index */

/* ---- 1. Hero ---- */
.pg-hero {
  min-height: 909px;
  display: flex;
  align-items: center;
}

.pg-hero-scrim {
  background: linear-gradient(90deg, rgba(0, 0, 0, .83) 17%, rgba(0, 0, 0, 0) 98%);
}

/* The hero uses the header's wide gutter, not the standard .container - its
   left edge sits much further left than the rest of the page's content
   (measured x193 on a 1920 viewport), so it gets its own full-width wrapper
   with a matching left inset instead of the shared .container rule. */
.pg-hero-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 45px 0 max(45px, calc((100% - 1534px) / 2));
  text-align: left;
}

.pg-hero-col { max-width: 760px; }

.pg-hero h1 {
  font-size: 58px;
  line-height: 1.11em;
  color: var(--white);
  margin: 0 0 22px;
}

.pg-hero p {
  font-size: 16px;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 28px;
}

/* ---- 2. Green features strip ---- */
.pg-strip { padding: 34px 0; }

/* Measured off the source at 1920px: 3 equal 375px columns (1125px total),
   centred, each with a ~32px inset before its icon so the dividers land
   exactly on the column boundaries. */
.pg-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 1125px;
  margin: 0 auto;
  gap: 0;
}

.pg-strip-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 375px;
  width: 375px;
  max-width: 375px;
  box-sizing: border-box;
  padding-left: 32px;
}

.pg-strip-item img { flex: 0 0 auto; width: 80px; height: 80px; }

.pg-strip-item h6 {
  font-size: 22px;
  color: var(--white);
  margin: 0 0 4px;
  white-space: nowrap;
}

.pg-strip-item p {
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
  margin: 0;
}

.pg-strip-div {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, .35);
}

/* ---- 3. About ---- */
.pg-about-grid {
  display: grid;
  grid-template-columns: 52fr 44fr;
  gap: 40px;
  align-items: start;
}

.pg-about-text .eyebrow { margin-bottom: 10px; }

.pg-about-text h2 {
  color: var(--black);
  margin: 0 0 20px;
}

.pg-about-text > p {
  font-size: 16px;
  color: var(--black);
  margin: 0 0 16px;
}

.pg-about-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--black);
}

.pg-about-row p { margin: 0; }

.pg-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 3px;
}

.pg-arrow svg { width: 100%; height: 100%; }

.pg-about-text .btn { margin-top: 8px; }

.pg-about-media { position: relative; }

.pg-about-media img {
  display: block;
  width: 100%;
  height: 586px;
  object-fit: cover;
  border-radius: 2px;
}

.pg-about-card {
  position: absolute;
  left: -40px;
  bottom: 40px;
  width: 150px;
  min-height: 110px;
  padding: 18px 14px;
  text-align: center;
}

.pg-about-card h5 {
  font-size: 40px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: .07em;
  margin: 0 0 6px;
}

.pg-about-card p {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin: 0;
}

/* ---- 4. Services ---- */
.pg-services-title {
  text-align: center;
  color: var(--white);
  margin: 0 0 40px;
}

.pg-services-grid { align-items: start; }

.pg-service-card { overflow: hidden; }

.pg-service-media {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.pg-service-body { padding: 20px 22px 24px; }

.pg-service-body h6:first-child {
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 10px;
}

.pg-service-body h6:last-child {
  font-size: 14px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 0;
}

/* ---- 5. Did you know ---- */
.pg-didyouknow { padding: 56px 0; }

.pg-dyk-inner { max-width: none; }

.pg-dyk-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.pg-dyk-head img { flex: 0 0 auto; width: 80px; height: 80px; }

.pg-dyk-heading {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--gold);
  margin: 0;
}

.pg-dyk-text {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
  text-decoration: underline;
  margin: 0 0 30px;
}

.pg-dyk-btn-wrap { text-align: right; }

/* ---- 6. What we do ---- */
.pg-wwd-grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 40px;
  align-items: start;
}

.pg-wwd-media-wrap {
  position: relative;
  overflow: visible;
  padding: 0;
}

.pg-wwd-media-img {
  display: block;
  width: 100%;
  height: 586px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.pg-wwd-rating-card {
  position: absolute;
  top: 48px;
  left: 177px;
  width: 326px;
  height: 90px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 21px;
  white-space: nowrap;
  z-index: 1;
}

.pg-wwd-rating-num {
  font-size: 55px;
  line-height: 1;
  font-weight: 800;
  color: var(--black);
  margin: 0;
}

.pg-wwd-rating-side p {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin: 2px 0 0;
}

.pg-stars {
  color: var(--amber);
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}

.pg-wwd-content h2 {
  color: var(--black);
  margin: 0 0 18px;
}

.pg-wwd-content p {
  font-size: 16px;
  color: var(--black);
  margin: 0 0 24px;
}

.pg-wwd-mini-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 900px;
  margin-top: -60px;
  position: relative;
  z-index: 2;
}

.pg-wwd-mini-card {
  padding: 24px 16px;
  text-align: center;
}

.pg-wwd-mini-card img { width: 58px; height: 58px; margin: 0 auto 14px; display: block; }

.pg-wwd-mini-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.4;
  margin: 0 0 8px;
}

.pg-wwd-mini-card p {
  font-size: 13px;
  color: #4a4a4a;
  line-height: 1.5;
  margin: 0;
}

/* ---- 7. Latest news ---- */
.pg-news-scrim { background: rgba(0, 0, 0, .45); }

.pg-news-title {
  text-align: center;
  color: var(--white);
  margin: 0 0 40px;
}

.pg-news-grid .post-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ---- 8. Testimonials ---- */
.pg-testi-title {
  text-align: center;
  color: var(--white);
  margin: 0 0 40px;
}

.pg-testi-card {
  padding: 30px 26px;
  text-align: center;
}

.pg-testi-quote {
  width: 46px;
  height: 38px;
  margin: 0 auto 14px;
  display: block;
}

.pg-testi-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 16px;
}

.pg-testi-card .pg-stars { display: block; margin-bottom: 14px; }

.pg-testi-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  margin: 0;
}

/* ---- 9. Areas we serve ---- */
.pg-areas-grid {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 40px;
  align-items: start;
}

.pg-areas-list-wrap h2 { color: var(--black); margin: 0 0 24px; }

.pg-areas-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}

.pg-area-item {
  padding: 12px 0;
  font-size: 18px;
  color: var(--black);
  border-bottom: 1px solid var(--gold);
}

.pg-areas-map { display: flex; justify-content: center; }

.pg-areas-map iframe { width: 100%; max-width: 572px; height: 592px; }

/* ---- 10. Contact ---- */
.pg-contact-grid {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 73px;
  align-items: start;
}

.pg-contact-form-wrap { max-width: 500px; }

.pg-contact-info h2 {
  color: var(--white);
  margin: 0 0 18px;
}

.pg-contact-lede {
  font-size: 16px;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 30px;
}

/* Source layout is 2 + 1: "Call Us" and "Email Us" sit side by side in a
   fixed-width first column so the icon-to-icon pitch is a constant 206px,
   with "Our Location" alone on the row underneath. */
.pg-contact-rows-top {
  display: grid;
  grid-template-columns: 206px 1fr;
  margin-bottom: 20px;
}

.pg-contact-rows-top .pg-contact-row { margin-bottom: 0; }

.pg-contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.pg-contact-row .icon-circle {
  width: 44px;
  height: 44px;
}

.pg-contact-row .icon-circle svg { width: 20px; height: 20px; }

.pg-contact-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.pg-contact-value {
  font-size: 16px;
  color: var(--white);
  margin: 2px 0 0;
}

.pg-contact-value a:hover { color: var(--gold); }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .pg-hero { min-height: 640px; }
  .pg-hero-inner { padding: 0 20px; }
  .pg-hero-col { max-width: 100%; }

  .pg-strip-inner { flex-wrap: wrap; max-width: 100%; gap: 28px; }
  .pg-strip-item { flex: 1 1 260px; width: auto; max-width: 340px; padding-left: 0; }

  .pg-dyk-btn-wrap { text-align: left; }

  .pg-about-grid,
  .pg-wwd-grid,
  .pg-areas-grid,
  .pg-contact-grid { grid-template-columns: 1fr; }

  .pg-about-media { margin-top: 40px; max-width: 440px; }
  .pg-about-card { position: static; margin-top: -40px; margin-left: 20px; }

  .pg-wwd-rating-card { top: 20px; left: auto; right: 20px; width: auto; }
  .pg-wwd-mini-grid { grid-template-columns: repeat(2, 1fr); margin-top: 24px; max-width: 100%; }

  .pg-areas-map iframe { height: 420px; }

  .pg-contact-form-wrap { max-width: 100%; }
}

@media (max-width: 640px) {
  .pg-wwd-mini-grid { grid-template-columns: 1fr; }
  .pg-areas-list { grid-template-columns: 1fr; }

  .pg-contact-rows-top { grid-template-columns: 1fr; gap: 20px; }
}


/* page: blog */

.pg-blog .blog-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.pg-blog .blog-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  color: var(--black);
  text-align: left;
  margin: 44px 0 32px;
  line-height: 1.2;
}

.pg-blog .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.pg-blog .post-card-media {
  cursor: pointer;
}

.pg-blog .post-card-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: #6a6a6a;
}

.pg-blog .post-card-more svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.pg-blog .post-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.pg-blog .blog-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 40px 0 8px;
}

.pg-blog .blog-pager-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  display: inline-block;
}

.pg-blog .blog-pager-dot.is-current {
  background: var(--black);
}

@media (max-width: 900px) {
  .pg-blog .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .pg-blog .blog-grid {
    grid-template-columns: 1fr;
  }

  .pg-blog .blog-h1 {
    margin-top: 28px;
  }
}

/* page: post */

.pg-post .post-page {
  max-width: 980px;
  margin: 34px auto 80px;
  padding: 0 20px;
}

.pg-post .post-article {
  background: var(--white);
  border: 1px solid var(--line-soft);
  padding: 40px 56px;
}

.pg-post .post-byline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6a6a6a;
}

.pg-post .post-byline .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--line-soft);
  flex: 0 0 auto;
}

.pg-post .post-byline .dot {
  color: #6a6a6a;
}

.pg-post .post-kebab {
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: #6a6a6a;
}

.pg-post .post-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  color: var(--black);
  margin: 18px 0 22px;
}

.pg-post .post-body {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: #2f2f2f;
}

.pg-post .post-body p {
  margin: 0 0 18px;
}

.pg-post .post-body h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin: 30px 0 14px;
}

.pg-post .post-body h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin: 26px 0 10px;
}

.pg-post .post-body ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.pg-post .post-body li {
  margin: 0 0 8px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: #2f2f2f;
}

.pg-post .post-body a {
  color: var(--green);
  text-decoration: underline;
}

.pg-post .post-body img {
  width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
}

.pg-post .post-body hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 24px 0;
}

.pg-post .post-share {
  display: flex;
  align-items: center;
  gap: 22px;
  border-top: 1px solid var(--line-soft);
  margin-top: 18px;
  padding-top: 18px;
  color: #2f2f2f;
}

.pg-post .post-share svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.pg-post .post-footer-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 12px;
  color: #6a6a6a;
}

.pg-post .post-footer-stats .like {
  margin-left: auto;
  color: #e0b0b0;
  display: inline-flex;
}

.pg-post .post-footer-stats .like svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.pg-post .recent-posts {
  max-width: 980px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.pg-post .recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.pg-post .recent-head h2 {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--black);
}

.pg-post .recent-head a {
  font-size: 12px;
  color: #2f2f2f;
}

.pg-post .recent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* post-page override: recent-grid thumbnails are 289x162, narrower titles than the
   default .post-card (which is tuned for the blog listing at 292x219 / 17px titles) */
.pg-post .recent-grid .post-card-media {
  aspect-ratio: 289 / 162;
}

.pg-post .recent-grid .post-card-title {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .pg-post .post-article { padding: 28px 22px; }
  .pg-post .recent-grid { grid-template-columns: minmax(0, 1fr); }
}

/* page: post - orchestrator addendum for two rules the post agents flagged as
   missing: the source shows an "Updated:" line under the h1 on the no-title
   guide, and that post floats its portrait image to the right of the opening
   paragraph instead of running it full width. */

.pg-post .post-updated {
  margin: -10px 0 18px;
  font-size: 12px;
  color: #6a6a6a;
}

.pg-post .post-body img.post-inline-image-right {
  float: right;
  width: min(350px, 100%);
  height: auto;
  margin: 4px 0 20px 40px;
}

.pg-post .post-body img.post-inline-image-left {
  float: left;
  width: min(350px, 100%);
  height: auto;
  margin: 4px 40px 20px 0;
}

.pg-post .post-body ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.pg-post .post-body ol li { padding-left: 4px; }

.pg-post .post-table-wrap {
  overflow-x: auto;
  margin: 0 0 18px;
}

.pg-post .post-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pg-post .post-table td {
  border: 1px solid #b3b3b3;
  padding: 10px;
  vertical-align: top;
  font-size: 16px;
  line-height: 1.5;
  color: #2f2f2f;
}

@media (max-width: 640px) {
  .pg-post .post-body img.post-inline-image-right,
  .pg-post .post-body img.post-inline-image-left {
    float: none;
    width: 100%;
    margin: 20px 0;
  }
}