/* ==========================================================
   ARCHITECTURAL MOTIFS
   Reusable visual language: grid, mesh, technical lines,
   crosshairs, frames, noise. Decorative only — aria-hidden
   in markup. Low opacity by design; never "blueprint wallpaper".
   ========================================================== */

/* ---- Technical grid (CSS-generated, no raster asset) ----
   Applied as a background layer on a positioned ::before/::after
   or on a dedicated .arch-grid element, then faded with a mask. */
.arch-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, var(--grid-color, var(--blue-10)) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--grid-color, var(--blue-10)) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at var(--grid-origin-x, 50%) var(--grid-origin-y, 40%), #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at var(--grid-origin-x, 50%) var(--grid-origin-y, 40%), #000 0%, transparent 72%);
}
.arch-grid.on-dark{--grid-color:var(--white-08);}
.arch-grid.dense{
  background-size:40px 40px;
}

/* ---- Structural mesh (diagonal + grid, used in CTA) ---- */
.arch-mesh{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:
    repeating-linear-gradient(90deg, var(--white-08) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, var(--white-08) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(45deg, transparent 0 79px, var(--blue-10) 79px 80px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
}

/* ---- Subtle noise (prevents flat digital color) ---- */
.noise{
  position:absolute;inset:0;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- Technical line: horizontal rule with end ticks ---- */
.technical-line{
  position:relative;
  height:1px;
  background:var(--blueprint);
  opacity:.4;
}
.technical-line::before,.technical-line::after{
  content:'';position:absolute;top:50%;width:1px;height:8px;background:var(--blueprint);
  transform:translateY(-50%);
}
.technical-line::before{left:0;}
.technical-line::after{right:0;}

/* ---- Measurement line: same, with a small mono label ---- */
.measurement-line{
  display:flex;align-items:center;gap:10px;
}
.measurement-line .line{flex:1;height:1px;background:var(--blueprint);opacity:.4;position:relative;}
.measurement-line .line::before,.measurement-line .line::after{
  content:'';position:absolute;top:50%;width:1px;height:7px;background:var(--blueprint);transform:translateY(-50%);
}
.measurement-line .line::before{left:0;}
.measurement-line .line::after{right:0;}
.measurement-line .label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);white-space:nowrap;
}
.measurement-line.on-dark .line{background:rgba(246,247,245,.35);opacity:1;}
.measurement-line.on-dark .line::before,
.measurement-line.on-dark .line::after{background:rgba(246,247,245,.35);}
.measurement-line.on-dark .label{color:rgba(246,247,245,.5);}

/* ---- Corner frame: thin line framing one corner of a section ---- */
.corner-frame{
  position:absolute;pointer-events:none;
  width:clamp(80px,10vw,160px);
  height:clamp(80px,10vw,160px);
}
.corner-frame.tl{top:0;left:0;border-top:1px solid var(--blue-20);border-left:1px solid var(--blue-20);}
.corner-frame.br{bottom:0;right:0;border-bottom:1px solid var(--blue-20);border-right:1px solid var(--blue-20);}
.corner-frame.on-dark.tl{border-color:var(--white-15);}
.corner-frame.on-dark.br{border-color:var(--white-15);}

/* ---- Crosshair: small architectural intersection marker ---- */
.crosshair{
  position:absolute;width:14px;height:14px;pointer-events:none;
}
.crosshair::before,.crosshair::after{
  content:'';position:absolute;background:var(--accent);opacity:.7;
}
.crosshair::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
.crosshair::after{left:50%;top:0;height:100%;width:1px;transform:translateX(-50%);}

/* ---- Orange marker: small accent line used to flag important info ---- */
.orange-marker{
  display:inline-block;width:22px;height:2px;background:var(--accent);
  transition:width .4s var(--ease);
}

/* ---- Icon badge: thin square frame around a line icon, used next to
   short list items (differentiators, contact details, checklists) so
   a visitor can scan what each one means at a glance. Deliberately an
   outlined box, not a filled circle — matches the site's restrained,
   architectural language instead of a generic "feature icon" look. ---- */
.icon-badge{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:38px;height:38px;
  border:1px solid var(--blue-20);
  color:var(--navy);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.icon-badge svg{display:block;}
.icon-badge.on-dark{border-color:rgba(246,247,245,.18);color:rgba(246,247,245,.85);}
.icon-badge.small{width:32px;height:32px;}
.icon-badge.small svg{width:15px;height:15px;}

/* ---- Image frame: technical border treatment for photography ---- */
.image-frame{position:relative;overflow:hidden;}
.image-frame .frame-tick{
  position:absolute;width:16px;height:16px;border-color:var(--orange-85);pointer-events:none;
}
.image-frame .frame-tick.tl{top:12px;left:12px;border-top:1px solid;border-left:1px solid;}
.image-frame .frame-tick.br{bottom:12px;right:12px;border-bottom:1px solid;border-right:1px solid;}

/* ---- Scroll progress (extremely thin, orange, optional) ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;
  background:var(--accent);
  width:0%;
  z-index:150;
  transition:width .1s linear;
}