/* Engraved (soft UI) geometric decoration for the home sections after the hero.
   Dark stroke + a light lip one pixel below-right = carved look. Markup: Pages/Shared/_Decor.cshtml. */
:root {
  --decor-k: .55;
  --decor-line: #8c6b45;
  --decor-edge: #fff8f1;
}
html[data-mode="dark"] {
  --decor-line: #c9a063;
  --decor-edge: #0e1317;
}

/* Decorated sections: ornaments are clipped at the section edge (no horizontal scroll). */
#about, #projects, #our-media, #services, #contact {
  position: relative;
  overflow: hidden;
  overflow: clip;
}
/* Content sits above the ornaments. :where keeps specificity at 0 so existing positioning wins. */
:where(#about, #projects, #our-media, #services, #contact) > :where(:not(.orn)) {
  position: relative;
  z-index: 1;
}

/* Section rules such as ".projects > * { position: relative }" are as specific as ".orn" and can win by load order,
   which put the ornament back into the layout and made the section tall. This selector is more specific. */
section > svg.orn { position: absolute; }

.orn {
  position: absolute;
  pointer-events: none;
  opacity: var(--decor-k);
  fill: none;
  filter: drop-shadow(1px 1px 0 var(--decor-edge));
  z-index: 0;
}
.orn * {
  stroke: var(--decor-line);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  fill: none;
}

/* Chevrons: physical left/right, never mirrored in RTL. */
.orn--chev-l, .orn--chev-r {
  top: 50%;
  width: clamp(110px, 18vw, 250px);
  height: clamp(220px, 36vw, 500px);
  transform: translateY(-50%);
}
.orn--chev-l { left: 0; }
.orn--chev-r { right: 0; transform: translateY(-50%) scaleX(-1); }

/* Rings */
.orn--rings-tl, .orn--rings-br {
  --s: clamp(220px, 34vw, 460px);
  width: var(--s);
  height: var(--s);
}
.orn--rings-tl { top: calc(var(--s) / -2.6); left: calc(var(--s) / -2.6); }
.orn--rings-br { bottom: calc(var(--s) / -2.8); right: calc(var(--s) / -2.8); }

.orn--rings-sm-tr, .orn--rings-sm-br, .orn--rings-sm-bl {
  width: clamp(120px, 16vw, 210px);
  height: clamp(120px, 16vw, 210px);
}
.orn--rings-sm-tr { top: 22px; right: 4%; }
.orn--rings-sm-br { bottom: 22px; right: 4%; }
.orn--rings-sm-bl { bottom: 22px; left: 4%; }

/* Divider */
.decor-divider {
  display: flex;
  align-items: center;
  max-width: 1180px;
  margin: clamp(.5rem, 2vw, 1.5rem) auto;
  padding-inline: var(--gutter, 1.25rem);
  pointer-events: none;
}
.decor-divider i {
  display: block;
  flex: 1;
  height: 1px;
  background: var(--decor-line);
  opacity: var(--decor-k);
  box-shadow: 0 1px 0 var(--decor-edge);
}
.decor-divider svg {
  flex: none;
  width: 44px;
  height: 44px;
  margin-inline: 14px;
  opacity: var(--decor-k);
  fill: none;
  filter: drop-shadow(1px 1px 0 var(--decor-edge));
}
.decor-divider svg * {
  stroke: var(--decor-line);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  fill: none;
}

/* Phones: the same decoration, scaled down so it stays a quiet background. */
@media (max-width: 767.98px) {
  .orn--chev-l, .orn--chev-r { width: 84px; height: 170px; }
  .orn--rings-tl, .orn--rings-br { --s: 240px; }
  .orn--rings-sm-tr, .orn--rings-sm-br, .orn--rings-sm-bl { width: 110px; height: 110px; }
  .orn--rings-sm-tr { right: 3%; top: 14px; }
  .orn--rings-sm-br { right: 3%; bottom: 14px; }
  .orn--rings-sm-bl { left: 3%; bottom: 14px; }
  .decor-divider svg { width: 36px; height: 36px; margin-inline: 10px; }
}

/* Gold corner brackets on the main cards (all screen sizes). Two small L-shaped corners per card, drawn with
   ::before / ::after so the card markup and its soft-UI shadows stay untouched. */
@media all {
  .s-card::before, .s-card::after,
  .contact-form::before, .contact-form::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 1;
    opacity: calc(var(--decor-k) + .3);
    border: 0 solid var(--gold, #b28a50);
  }
  /* Service cards: top-end and bottom-start (the big faint number sits at the bottom-end). */
  .s-card::before { top: 14px; inset-inline-end: 14px; border-top-width: 1px; border-inline-end-width: 1px; }
  .s-card::after { bottom: 14px; inset-inline-start: 14px; border-bottom-width: 1px; border-inline-start-width: 1px; }
  /* Contact card: top-start and bottom-end. */
  .contact-form::before { top: 16px; inset-inline-start: 16px; border-top-width: 1px; border-inline-start-width: 1px; }
  .contact-form::after { bottom: 16px; inset-inline-end: 16px; border-bottom-width: 1px; border-inline-end-width: 1px; }
}