/* Service / location page layout.
   Loaded AFTER style.css, so it inherits every design token (--canvas, --blue, --ink,
   --font-display …) and reuses .nav / .brand / .btn / .foot / .wrap unchanged. Only the
   article body needs new rules. */

.pg { padding: 128px 0 40px; }
.pg .wrap { max-width: 820px; }

/* breadcrumb */
.pg-crumb {
  display: flex; gap: 10px; align-items: center;
  font: 500 13px/1 var(--font-mono);
  color: var(--dimmer); margin-bottom: 34px; flex-wrap: wrap;
}
.pg-crumb a { color: var(--dimmer); text-decoration: none; }
.pg-crumb a:hover { color: var(--blue); }
.pg-crumb span[aria-hidden] { opacity: .45; }

/* header */
.pg-head { margin-bottom: 44px; }
.pg-head h1 {
  font: 700 clamp(34px, 5.4vw, 54px)/1.08 var(--font-display);
  letter-spacing: -.022em; color: var(--ink); margin: 14px 0 0;
}
.pg-lede {
  font: 400 clamp(17px, 2vw, 20px)/1.6 var(--font-body);
  color: var(--dim); margin: 20px 0 0; max-width: 62ch;
}
.pg-price {
  display: inline-flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 26px 0 0; padding: 13px 20px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .022);
}
.pg-price strong { font: 700 19px/1 var(--font-display); color: var(--blue); }
.pg-price span { font: 400 14px/1 var(--font-body); color: var(--dimmer); }
.pg-cta { margin-top: 26px; }

/* body */
.pg-intro {
  font: 400 17px/1.75 var(--font-body);
  color: var(--dim); margin: 0 0 20px; max-width: 70ch;
}
.pg-block { margin: 46px 0 0; }
.pg-block h2 {
  font: 600 clamp(22px, 2.8vw, 29px)/1.25 var(--font-display);
  letter-spacing: -.012em; color: var(--ink); margin: 0 0 16px;
}
.pg-block p {
  font: 400 17px/1.75 var(--font-body);
  color: var(--dim); margin: 0 0 14px; max-width: 70ch;
}

.pg-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 11px; }
.pg-list li {
  position: relative; padding-left: 27px;
  font: 400 16px/1.6 var(--font-body); color: var(--dim); max-width: 68ch;
}
.pg-list li::before {
  content: ''; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
}

/* faq */
.pg-faq {
  border-top: 1px solid var(--line); padding: 0;
}
.pg-faq:last-of-type { border-bottom: 1px solid var(--line); }
.pg-faq summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font: 600 16px/1.5 var(--font-body); color: var(--ink);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: 400 21px/1 var(--font-display); color: var(--blue);
}
.pg-faq[open] summary::after { content: '\2013'; }
.pg-faq p { padding: 0 0 18px; margin: 0; font-size: 16px; }

/* related */
.pg-rel { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.pg-rel a {
  display: block; padding: 17px 18px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(255, 255, 255, .018);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.pg-rel a:hover { border-color: var(--blue-lo); background: rgba(212, 175, 106, .05); }
.pg-rel strong { display: block; font: 600 15px/1.35 var(--font-display); color: var(--ink); }
.pg-rel span { display: block; margin-top: 6px; font: 400 13px/1.55 var(--font-body); color: var(--dimmer); }

/* closing cta */
.pg-end {
  margin: 62px 0 26px; padding: 34px 30px;
  border: 1px solid var(--line); border-radius: 15px;
  background: linear-gradient(180deg, rgba(212, 175, 106, .055), rgba(255, 255, 255, .012));
  text-align: center;
}
.pg-end h2 {
  font: 700 clamp(23px, 3vw, 30px)/1.2 var(--font-display);
  color: var(--ink); margin: 0 0 12px;
}
.pg-end p {
  font: 400 16px/1.7 var(--font-body); color: var(--dim);
  margin: 0 auto 22px; max-width: 52ch;
}

/* ---------- insights ---------- */

/* The answer, before the article. Deliberately the most prominent thing on the page:
   burying the answer to keep someone scrolling is what makes most of this genre
   useless, and answer engines skip past it too. */
.pg-answer {
  margin: 22px 0 0; padding: 20px 22px;
  border: 1px solid var(--blue-lo); border-radius: 13px;
  background: linear-gradient(180deg, rgba(212, 175, 106, .07), rgba(255, 255, 255, .012));
}
.pg-answer span {
  display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue);
}
.pg-answer p {
  margin: 11px 0 0; font: 400 clamp(15px, 1.7vw, 17px)/1.65 var(--font-body); color: var(--ink);
}
.pg-updated {
  margin: 14px 0 0; font: 400 12px/1 var(--font-mono); color: var(--dimmer);
}

/* ---------- case studies ---------- */

/* Who the work was for, stated up front. Deliberately prominent rather than a
   footnote: most of these are our own group's products, and burying that is the
   dishonesty this section exists to avoid. */
.pg-own {
  margin: 18px 0 0; padding: 13px 16px;
  border-left: 2px solid var(--blue-lo);
  background: rgba(212, 175, 106, .045);
  border-radius: 0 9px 9px 0;
  font: 400 14px/1.6 var(--font-body); color: var(--dim);
}
.pg-own strong { color: var(--ink); font-weight: 600; }

.pg-stack { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; }
.pg-stack span {
  font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dimmer); padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 999px;
}

.pg-also { margin: 14px 0 0; font: 400 13.5px/1.7 var(--font-body); color: var(--dimmer); }
.pg-also a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); }
.pg-also a:hover { color: var(--blue); border-bottom-color: var(--blue-lo); }

/* index cards carry more copy, so they need more room than the related-links grid */
.pg-rel-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pg-rel-lg a { padding: 22px 22px; }
.pg-rel-lg strong { font-size: 17px; line-height: 1.3; }

@media (max-width: 640px) {
  .pg { padding: 104px 0 28px; }
  .pg-end { padding: 28px 20px; }
  .pg-rel { grid-template-columns: 1fr; }
  .pg-rel-lg { grid-template-columns: 1fr; }
}