/* BCE finishing layer: small details that make the site feel built rather
   than assembled. Loaded last; changes appearance only, never content. */

/* Text selection in the brand's own colours instead of the browser's blue. */
::selection { background: var(--gold-pale); color: var(--ink); }

/* --- Contact: the click-to-load map ----------------------------------------
   Until the visitor asks for Google Maps, the slot is a drawn street plan with
   a pin on the office, so it reads as a map waiting to open rather than an
   empty box. Pure CSS: nothing is requested from anyone. */
.bce-map .map-consent {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--cream-2);
  background-image:
    /* the label sits on a soft paper halo */
    radial-gradient(ellipse 300px 110px at 50% 64%, rgba(251, 250, 244, 0.96) 30%, rgba(251, 250, 244, 0) 100%),
    /* two main roads */
    linear-gradient(102deg, transparent calc(46% - 8px), #fbfaf4 calc(46% - 8px), #fbfaf4 calc(46% + 8px), transparent calc(46% + 8px)),
    linear-gradient(14deg, transparent calc(58% - 6px), #fbfaf4 calc(58% - 6px), #fbfaf4 calc(58% + 6px), transparent calc(58% + 6px)),
    /* the street grid */
    repeating-linear-gradient(102deg, transparent 0 62px, rgba(251, 250, 244, 0.85) 62px 65px),
    repeating-linear-gradient(14deg, transparent 0 78px, rgba(251, 250, 244, 0.85) 78px 81px);
  transition: border-color .2s var(--ease-out), transform .16s var(--ease-out);
}
.bce-map .map-consent > span { position: relative; z-index: 1; }
.bce-map .map-consent .mc-title { margin-top: 74px; }

/* pin, standing on the office */
.bce-map .map-consent::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% - 64px);
  width: 30px;
  height: 30px;
  margin-left: -15px;
  background: var(--green-1);
  border: 3px solid var(--gold-soft);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 10px 18px -8px rgba(10, 45, 34, 0.55);
  transition: transform .2s var(--ease-out);
  z-index: 1;
}
/* its shadow ring on the ground */
.bce-map .map-consent::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% - 26px);
  width: 34px;
  height: 10px;
  margin-left: -17px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: .7;
}
.bce-map .map-consent:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) {
  .bce-map .map-consent:hover::before { transform: translateY(-4px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bce-map .map-consent,
  .bce-map .map-consent::before { transition: none; }
}
.mobile-doc .bce-map .map-consent .mc-title { margin-top: 70px; }
.mobile-doc .bce-map .map-consent::before { top: calc(50% - 82px); }
.mobile-doc .bce-map .map-consent::after { top: calc(50% - 44px); }

/* --- Services: one row per service line ------------------------------------
   Number on a gold rule, the title, then a photograph that runs off the page
   edge; on the other side the scope as an icon list and a strip of three
   photographs. The bleed is the gutter plus whatever the viewport has beyond
   --maxw, so the photo always meets the window edge. All photos are captioned
   as illustrative (see SERVICE_PHOTOS in app/pages.js). */
.bce-services-detail { overflow-x: clip; }
.bce-services-detail .bce-service-row {
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 5vw, 76px);
  padding: 76px 0;
}
.bce-service-row .left .n {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-serif); font-size: 24px; font-weight: 500;
  letter-spacing: 0; color: var(--gold); margin-bottom: 18px;
}
.bce-service-row .left .n::after {
  content: ''; width: 76px; height: 1px; background: var(--gold); opacity: .55;
}
.bce-service-row .left h2 { font-size: clamp(40px, 3.9vw, 56px); line-height: 1.04; margin-bottom: 20px; text-wrap: balance; }
.bce-service-row .left .lead { font-size: 19px; line-height: 1.55; max-width: 34em; margin-bottom: 34px; }

.svc-photo {
  --bleed: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gutter));
  position: relative;
  margin: 0;
  margin-inline-start: calc(-1 * var(--bleed));
  aspect-ratio: 16 / 10;
  max-height: 480px;
  overflow: hidden;
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
  background: var(--cream-2);
}
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-tag {
  position: absolute; inset-inline-end: 14px; bottom: 14px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(14, 20, 17, 0.58); color: var(--cream);
  font-family: var(--font-sans); font-size: 11px; letter-spacing: .04em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.bce-service-row .right .body { font-size: 17px; line-height: 1.65; margin-bottom: 26px; }
.bce-service-row .right .svc-list li {
  gap: 22px; padding: 17px 0;
  font-family: var(--font-serif); font-size: 18px; line-height: 1.35; color: var(--ink);
}
.bce-service-row .right .svc-list li::before { content: none; }
.svc-ico { flex: 0 0 auto; width: 54px; height: 54px; color: var(--gold); display: grid; place-items: center; }
.svc-ico svg { width: 50px; height: 50px; stroke-width: 1.35; }
.svc-spec { color: var(--muted); }

.svc-gallery { margin-top: 34px; }
.svc-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc-thumbs figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--cream-2); }
.svc-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .svc-thumbs figure:hover img { transform: scale(1.04); }
}
.svc-note { margin-top: 10px; font-size: 12px; color: var(--muted); }

.mobile-doc .svc-photo { --bleed: 24px; margin-inline-end: -24px; border-radius: 0; }
.mobile-doc .bce-service-row .left .lead { margin-bottom: 26px; }
.mobile-doc .bce-service-row .right .svc-list li { font-size: 16px; gap: 16px; padding: 14px 0; }
.mobile-doc .svc-ico, .mobile-doc .svc-ico svg { width: 38px; height: 38px; }
.mobile-doc .svc-thumbs { gap: 8px; }
@media (prefers-reduced-motion: reduce) { .svc-thumbs img { transition: none; } }