/* ============================================================
   ECO-TRI-SERVICE — Shared design tokens
   ============================================================ */

:root {
  --accent: #1F3D2E;
  --accent-soft: #C9CFC2;
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --density: 1;
}

/* ============================================================
   Common reset within artboards
   ============================================================ */
.ets-root *,
.ets-root *::before,
.ets-root *::after { box-sizing: border-box; }

.ets-root {
  font-family: var(--font-body);
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

.ets-root h1, .ets-root h2, .ets-root h3 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ets-root p { margin: 0; text-wrap: pretty; }

/* photo placeholders — sober, labelled */
.photo-ph {
  position: relative;
  background: #E8E5DD;
  overflow: hidden;
  color: #1A1A1A;
}
.photo-ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0.04) 25%, transparent 25%),
    linear-gradient(225deg, rgba(0,0,0,0.04) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(0,0,0,0.04) 25%, transparent 25%),
    linear-gradient(315deg, rgba(0,0,0,0.04) 25%, transparent 25%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  opacity: 0.55;
}
.photo-ph__label {
  position: absolute;
  left: 14px; bottom: 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26,26,26,0.7);
  font-family: var(--font-body);
}
.photo-ph__caption {
  position: absolute;
  right: 14px; top: 12px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(26,26,26,0.55);
  font-family: var(--font-body);
}

/* subtle hover lift on cards */
.lift { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.lift:hover { transform: translateY(-3px); }

/* underline link */
.u-link {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap .25s, color .25s;
}
.u-link:hover { gap: 12px; }

/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.in  { opacity: 1; transform: none; }

@keyframes ets-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }