/* ===================================================================
   GLOBALSTAFF — construction-specific styles (additions/overrides)
   Loaded after components2.css
   =================================================================== */

/* ---------------- HERO stone transformation ---------------- */
.hero-stone {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.hero-stone svg { display: block; width: 100%; flex: 1; min-height: 0; }
.hs-coord { font-family: var(--font-mono); font-size: 11px; fill: var(--brand); letter-spacing: 0.06em; transition: opacity 600ms ease; }
.hs-dim { font-family: var(--font-mono); font-size: 11px; fill: var(--accent); letter-spacing: 0.04em; transition: opacity 500ms ease; }

.hs-stages {
  position: static;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}
.hs-stage { display: flex; align-items: center; gap: 9px; opacity: 0.4; transition: opacity 400ms var(--ease); }
.hs-stage.on { opacity: 1; }
.hs-stage-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--brand); background: var(--surface-card); transition: all 300ms var(--ease); }
.hs-stage.on .hs-stage-dot { background: var(--brand); }
.hs-stage.cur .hs-stage-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px rgba(217,144,65,0.18); }
.hs-stage-label { font-size: 10px; letter-spacing: 0.12em; color: var(--brand); }
.hs-stage.cur .hs-stage-label { color: var(--accent); }
.hs-chip { left: auto; right: 18px; bottom: 18px; }

@media (max-width: 980px) {
  .hero-stone { aspect-ratio: 1 / 0.92; height: auto; }
}

/* ---------------- SERVICES (stone pattern cards) ---------------- */
.svc-pattern { background: var(--bg-tertiary); border-bottom: 1px solid var(--line); height: 180px; }

/* ---------------- STONE SOLUTIONS extra ---------------- */
.fleet-apps { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.fleet-app { display: flex; align-items: center; gap: 10px; }
.fleet-app-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.fleet-app-text { color: var(--text-secondary); font-size: 14px; }

/* ---------------- PROJECTS (framed architectural sheets) ---------------- */
.projects-section { background: var(--bg-tertiary); }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.project-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.project-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.project-media image-slot {
  display: block;
  width: 100%;
  height: 100%;
  --slot-bg: #ECE9E1;
}
/* the uploaded boards are presentation sheets — let them sit calmly, lift the photo slightly on hover */
.project-media image-slot::part(image) { transition: transform var(--dur-slow) var(--ease); }
.project-card:hover .project-media image-slot { transform: scale(1.015); transition: transform var(--dur-slow) var(--ease); }
.project-sheet {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--brand);
  background: rgba(252,251,248,0.88);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  pointer-events: none;
}
.project-info { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.project-info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-name { color: var(--brand); font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.2; }
.project-arrow { color: var(--accent); transition: transform var(--dur-fast) var(--ease); flex-shrink: 0; }
.project-card:hover .project-arrow { transform: translateX(4px); }
.project-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.project-meta-item { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; }
@media (max-width: 760px) {
  .projects-grid { grid-template-columns: 1fr; }
}

/* ---------------- ABOUT architectural visual ---------------- */
.about-visual {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.about-visual-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.about-visual-title { font-size: 11px; color: var(--text-secondary); letter-spacing: 0.1em; }
.about-visual-tag { font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.08em; }
.about-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.about-detail { padding: 16px; background: var(--bg-tertiary); border: 1px solid var(--line); border-radius: var(--r-ui); }
.about-detail-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-secondary); text-transform: uppercase; }
.about-detail-v { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--brand); margin-top: 8px; line-height: 1; }
.about-detail-sub { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }

/* ---------------- QUOTE blueprint sketch ---------------- */
.quote-blueprint-label { font-family: var(--font-mono); font-size: 11px; fill: rgba(247,245,241,0.85); letter-spacing: 0.04em; }
.quote-blueprint-label.accent { fill: var(--accent-soft); }

/* preliminary cost estimate plaque (inside the dark sketch band) */
.quote-est-strip {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(247,245,241,0.16);
  background: rgba(247,245,241,0.05);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease);
}
.quote-est-strip[data-on="1"] {
  border-color: rgba(217,144,65,0.5);
  background: rgba(217,144,65,0.12);
}
.quote-est-strip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.quote-est-strip-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247,245,241,0.7); }
.quote-est-strip-val { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: rgba(247,245,241,0.65); line-height: 1; }
.quote-est-strip[data-on="1"] .quote-est-strip-val { color: var(--accent-soft); }
.quote-est-strip-note { font-size: 10px; letter-spacing: 0.04em; color: rgba(247,245,241,0.5); }

/* textarea field */
.q-input.q-textarea { min-height: 96px; resize: vertical; font-family: var(--font-body); line-height: 1.5; }

/* ---------------- FOOTER drafting graphic ---------------- */
.footer-terminus { background: var(--bg-footer); }

/* ===================================================================
   GLOBAL ARCHITECTURAL BACKGROUND SYSTEM
   Subtle blueprint grid + sparse coordinate crosshairs + edge ticks,
   layered over each section's colour. ~3–5% so it reads as a technical
   workspace, never decoration.
   =================================================================== */
.section, .hero {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='none' stroke='%23264653' stroke-opacity='0.07'%3E%3Cpath d='M160 151v18M151 160h18'/%3E%3Cpath d='M0 0v6M40 0v3M80 0v3M120 0v3M160 0v6M200 0v3M240 0v3M280 0v3' stroke-opacity='0.05'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(38,70,83,0.038) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(38,70,83,0.038) 39px 40px);
  background-attachment: fixed, fixed, fixed;
}
/* keep the hero's warm glow on top of the grid */
.hero {
  background-image:
    radial-gradient(1100px 600px at 78% 18%, rgba(217,144,65,0.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='none' stroke='%23264653' stroke-opacity='0.07'%3E%3Cpath d='M160 151v18M151 160h18'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(38,70,83,0.04) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(38,70,83,0.04) 39px 40px);
  background-attachment: scroll, fixed, fixed, fixed;
}
/* footer (dark) — light technical grid */
.footer {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(247,245,241,0.04) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(247,245,241,0.04) 39px 40px);
  background-attachment: fixed, fixed;
}
/* faint construction reference lines down the content edges */
.section > .container { position: relative; }
.section > .container::before,
.section > .container::after {
  content: "";
  position: absolute;
  top: -60px; bottom: -60px;
  width: 1px;
  background: repeating-linear-gradient(180deg, rgba(38,70,83,0.16) 0 5px, transparent 5px 13px);
  opacity: 0.4;
  pointer-events: none;
}
.section > .container::before { left: 8px; }
.section > .container::after  { right: 8px; }
@media (max-width: 1100px) {
  .section > .container::before, .section > .container::after { display: none; }
}

/* ===================================================================
   MICROINTERACTIONS — heading blueprint sweep + drawn accent tick
   =================================================================== */
.section-head h2 { position: relative; }
.section-head h2.reveal {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 820ms var(--ease);
}
.section-head h2.reveal.in { clip-path: inset(0 0 0 0); }
.section-head h2.reveal::after {
  content: "";
  position: absolute;
  left: 2px; bottom: -16px;
  height: 2px; width: 60px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--ease) 360ms;
}
.section-head h2.reveal.in::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .section-head h2.reveal { clip-path: none; }
  .section-head h2.reveal::after { transform: scaleX(1); transition: none; }
}