/*
 * SBR cultural accent layer
 * Abstracts Punjabi Phulkari geometry into low-contrast corporate detailing.
 * This file intentionally owns no layout, typography, photography or controls.
 */
:root {
  --sbr-stitch-cobalt: rgba(24, 93, 203, 0.42);
  --sbr-stitch-navy: rgba(7, 24, 47, 0.17);
  --sbr-stitch-red: rgba(215, 40, 47, 0.26);
}

.sbr-geo-corner,
.sbr-stitch-divider {
  position: relative;
  isolation: isolate;
}

/* One watermark-like corner fragment, never placed on photography. */
.sbr-geo-corner::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(28px, 5vw, 72px);
  right: max(18px, calc((100vw - var(--container)) / 2 - 34px));
  width: clamp(132px, 15vw, 230px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.042;
  background:
    linear-gradient(45deg, transparent 46%, var(--cobalt) 47% 53%, transparent 54%) 0 0 / 32px 32px,
    linear-gradient(-45deg, transparent 46%, var(--cobalt) 47% 53%, transparent 54%) 16px 0 / 32px 32px;
  clip-path: polygon(34% 0, 100% 0, 100% 66%, 83% 49%, 66% 66%, 49% 49%, 32% 66%, 15% 49%, 0 64%, 0 34%);
  animation: sbr-stitch-settle 1.5s cubic-bezier(.2,.75,.2,1) both;
}

/* Selected section transition: line — diamond stitch — line. */
.sbr-stitch-divider::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: min(calc(100% - 48px), var(--container));
  height: 9px;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0.62;
  background:
    linear-gradient(90deg, rgba(17, 78, 191, .17), rgba(17, 78, 191, .52)) left 4px / calc(50% - 38px) 1px no-repeat,
    linear-gradient(90deg, rgba(17, 78, 191, .52), rgba(17, 78, 191, .17)) right 4px / calc(50% - 38px) 1px no-repeat,
    linear-gradient(45deg, transparent 43%, var(--sbr-stitch-cobalt) 44% 56%, transparent 57%) calc(50% - 18px) 0 / 10px 10px no-repeat,
    linear-gradient(45deg, transparent 43%, var(--sbr-stitch-red) 44% 56%, transparent 57%) 50% 0 / 10px 10px no-repeat,
    linear-gradient(45deg, transparent 43%, var(--sbr-stitch-cobalt) 44% 56%, transparent 57%) calc(50% + 18px) 0 / 10px 10px no-repeat;
}

/* Tiny stitch rhythm on selected eyebrow systems only. */
.sbr-geo-corner :is(.eyebrow, .about-eyebrow, .services-eyebrow, .coverage-eyebrow, .contact-eyebrow) {
  position: relative;
}
.sbr-geo-corner :is(.eyebrow, .about-eyebrow, .services-eyebrow, .coverage-eyebrow, .contact-eyebrow)::after {
  content: "";
  display: inline-block;
  width: 17px;
  height: 7px;
  margin-left: 10px;
  vertical-align: 1px;
  opacity: .46;
  background:
    linear-gradient(45deg, transparent 40%, currentColor 42% 58%, transparent 60%) left / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 40%, currentColor 42% 58%, transparent 60%) right / 7px 7px no-repeat;
}

/* Footer is the only location with a slightly more visible textile rhythm. */
.footer-bottom {
  position: relative;
}
.footer-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 5px;
  opacity: .38;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(53, 121, 226, .48), transparent) center top / 100% 1px no-repeat,
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(66, 134, 235, .36) 8px 9px, transparent 9px 16px) center / 150px 5px no-repeat;
}

@keyframes sbr-stitch-settle {
  from { opacity: 0; transform: translate3d(12px, -8px, 0); }
  to { opacity: .042; transform: none; }
}

@media (max-width: 700px) {
  .sbr-geo-corner::after { display: none; }
  .sbr-stitch-divider::before {
    width: calc(100% - 32px);
    opacity: .42;
    background-size: calc(50% - 28px) 1px, calc(50% - 28px) 1px, 8px 8px, 8px 8px, 8px 8px;
  }
  .sbr-geo-corner :is(.eyebrow, .about-eyebrow, .services-eyebrow, .coverage-eyebrow, .contact-eyebrow)::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sbr-geo-corner::after { animation: none; }
}