/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 * Hallmark · genre: atmospheric-dark · macrostructure: Marquee Hero (restored at user request) · theme: custom "Jobsite"
 * axes: dark / display-condensed / warm-neutral · nav: N1-custom (brand + links + call) · footer: Ft1 mast-headed
 * de-AI pass over v1: Big Shoulders Display + Geist replaces Anton + Inter · zero section eyebrows ·
 * asymmetric 3fr/2fr service grid (no numbered cards) · no universal scroll reveals (hero entrance only) ·
 * OKLCH tokens only · all-caps display line-height >= 1.02 · single hover signal per element
 * contrast: pass (40-41) · honest: pass (46) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50-57)
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  overflow-x: clip;
  background: var(--color-ink);
  color: var(--color-bone);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:active { color: var(--color-tan); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}
h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.04; }
h3 { font-size: 1.4rem; letter-spacing: 0.04em; }

.section { padding: clamp(4.5rem, 10vw, 8.5rem) var(--page-gutter); }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---- scroll progress ---- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-sticky); }
.progress span { display: block; height: 100%; width: 0; background: var(--color-tan); }

/* ---- nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  transition: background var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out);
}
.nav.solid {
  background: oklch(14% 0.006 80 / 0.94);
  box-shadow: 0 1px 0 var(--color-line);
}
.nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem; letter-spacing: 0.05em;
  display: flex; align-items: baseline; gap: 0.3rem;
  line-height: 1;
}
.nav-brand span { color: var(--color-tan); }
.nav-brand em {
  font-style: normal; font-family: var(--font-body);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--color-mute); margin-left: 0.2rem;
}
.nav-links { display: flex; gap: 1.8rem; }
.nav-links a {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em;
  opacity: 0.75; transition: opacity var(--dur-micro) var(--ease-out);
  text-transform: uppercase; white-space: nowrap;
}
.nav-links a:hover { opacity: 1; }
.nav-call {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.08em;
  background: var(--color-tan); color: var(--color-ink);
  padding: 0.6rem 1.3rem; border-radius: var(--radius-btn);
  white-space: nowrap; line-height: 1;
  transition: background var(--dur-short) var(--ease-out);
}
.nav-call:hover { background: var(--color-bone); }
.nav-call:active { color: var(--color-ink); }
.nav-call-menu { position: relative; }
.nav-call-menu > summary { list-style: none; cursor: pointer; }
.nav-call-menu > summary::-webkit-details-marker { display: none; }
.nav-call-menu[open] > summary { background: var(--color-bone); }
.nav-call-options {
  position: absolute; top: calc(100% + 0.65rem); right: 0; z-index: 2;
  display: grid; gap: 0.2rem; min-width: 13.5rem; max-width: calc(100vw - 2.5rem);
  padding: 0.45rem; background: var(--color-ink-2);
  border: var(--rule-hair) solid var(--color-line); border-radius: var(--radius-card);
  box-shadow: 0 14px 34px oklch(0% 0 0 / 0.3);
}
.nav-call-option {
  display: block; padding: 0.65rem 0.75rem;
  border-radius: var(--radius-btn); color: var(--color-bone);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em;
  line-height: 1.25; text-transform: uppercase; white-space: nowrap;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.nav-call-option:hover,
.nav-call-option:focus-visible { background: oklch(95% 0.011 85 / 0.08); color: var(--color-tan); }
.nav-actions { display: flex; align-items: center; gap: 0.55rem; }
.lang-toggle {
  margin: 0; padding: 0.46rem 0.62rem;
  background: none; border: 1px solid oklch(95% 0.011 85 / 0.3);
  border-radius: 999px; color: var(--color-mute);
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; line-height: 1; cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.lang-toggle:hover,
.lang-toggle.active { color: var(--color-bone); border-color: oklch(95% 0.011 85 / 0.7); background: oklch(95% 0.011 85 / 0.08); }

/* ---- hero ---- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-media { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 18s var(--ease-out) both;
}
@keyframes kenburns {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}
.hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, oklch(10% 0.005 80 / 0.55) 0%, oklch(10% 0.005 80 / 0.15) 40%, oklch(10% 0.005 80 / 0.82) 100%),
    linear-gradient(90deg, oklch(10% 0.005 80 / 0.62) 0%, oklch(10% 0.005 80 / 0.1) 65%);
}
.hero-inner {
  position: relative; z-index: 2;
  padding: calc(var(--nav-h) + 2rem) var(--page-gutter) 6rem;
  max-width: 1200px;
}
.hero-kicker {
  font-size: clamp(0.62rem, 1.6vw, 0.8rem); font-weight: 600;
  letter-spacing: 0.3em; color: var(--color-tan); margin-bottom: 1.4rem;
}
.hero-title {
  font-size: var(--text-display);
  line-height: 1.02;
  text-shadow: 0 6px 40px oklch(0% 0 0 / 0.45);
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line span { display: inline-block; }
.hero-sub {
  max-width: 34rem; margin-top: 1.6rem;
  font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--color-bone);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.btn {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.15rem); letter-spacing: 0.06em;
  padding: 0.95rem 1.7rem; border-radius: var(--radius-btn);
  white-space: nowrap; line-height: 1;
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn-solid { background: var(--color-tan); color: var(--color-ink); }
.btn-solid:hover { background: var(--color-bone); }
.btn-solid:active { color: var(--color-ink); }
.btn-ghost { border: 1px solid oklch(95% 0.011 85 / 0.55); color: var(--color-bone); }
.btn-ghost:hover { border-color: var(--color-tan); color: var(--color-tan); }
.hero-badge {
  margin-top: 2rem; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.26em; color: var(--color-mute);
  display: flex; align-items: center; gap: 0.6rem;
}
.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; width: 26px; height: 44px;
  border: 1.5px solid oklch(95% 0.011 85 / 0.5); border-radius: 14px;
}
.hero-scroll span {
  position: absolute; top: 8px; left: 50%; margin-left: -2px;
  width: 4px; height: 8px; border-radius: 2px; background: var(--color-tan);
  animation: drop 1.8s var(--ease-in-out) infinite;
}
@keyframes drop {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* hero entrance — the page's one orchestrated moment */
.rise {
  opacity: 0; transform: translateY(40px);
  animation: riseIn 1s var(--ease-out) forwards;
}
.hero-title .rise { transform: translateY(110%); }
.d1 { animation-delay: 0.15s; }
.d2 { animation-delay: 0.28s; }
.d3 { animation-delay: 0.55s; }
.d4 { animation-delay: 0.7s; }
.d5 { animation-delay: 0.85s; }
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }

/* ---- section transitions (chosen per-section in the site editor) ----
   data-transition = fade | rise | zoom; .in-view is added by main.js when
   the block scrolls into view. Gated on html.anim so no-JS stays visible. */
@media (prefers-reduced-motion: no-preference) {
  html.anim [data-transition] {
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  }
  html.anim [data-transition]:not(.in-view) { opacity: 0; }
  html.anim [data-transition="rise"]:not(.in-view) { transform: translateY(48px); }
  html.anim [data-transition="zoom"]:not(.in-view) { transform: scale(0.94); }
}

/* ---- section seams (chosen per-section in the site editor) ----
   data-seam softens the boundary ABOVE a block: an overlay hangs up over
   the previous block's bottom edge and melts it into this block's colour.
   --seam-color is set inline by the editor (this block's own background). */
[data-seam] { position: relative; }
[data-seam]::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  z-index: 2; pointer-events: none;
}
[data-seam="fade"]::before {
  height: clamp(90px, 14vw, 220px);
  background: linear-gradient(to bottom, transparent, var(--seam-color, var(--color-ink)));
}
[data-seam="dark"]::before {
  height: clamp(90px, 14vw, 220px);
  background: linear-gradient(to bottom, transparent, oklch(3% 0.003 80));
}
[data-seam="dark"]::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: clamp(60px, 9vw, 140px); z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, oklch(3% 0.003 80), transparent);
}
[data-seam="slant"]::before {
  height: clamp(50px, 8vw, 130px);
  background: var(--seam-color, var(--color-ink));
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* ---- marquee ---- */
.marquee {
  overflow: hidden; border-top: var(--rule-hair) solid var(--color-line); border-bottom: var(--rule-hair) solid var(--color-line);
  background: var(--color-ink-2); padding: 1.1rem 0;
}
.marquee-track { display: flex; width: max-content; animation: scrollX 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 2.6vw, 1.5rem); letter-spacing: 0.14em;
  color: var(--color-tan); white-space: nowrap; padding-right: 1rem;
}
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ---- about ---- */
.about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
}
.about-media { position: relative; }
.about-media img { border-radius: var(--radius-card); }
.about-frame {
  position: absolute; inset: 0;
  transform: translate(16px, 16px);
  border: var(--rule-hair) solid var(--color-tan); border-radius: var(--radius-card);
  z-index: -1;
}
.about-copy h2 { margin-bottom: 1.4rem; }
.about-copy p { color: var(--color-mute); margin-bottom: 1.1rem; max-width: 32rem; }
.stats {
  display: flex; gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.2rem; padding-top: 1.8rem;
  border-top: var(--rule-hair) solid var(--color-line);
}
.stat strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  color: var(--color-tan); display: block; line-height: 1;
}
.stat span {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; color: var(--color-mute);
}

/* ---- services: asymmetric grid, no numbered cards ---- */
.services { background: var(--color-ink-2); }
.cards {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.cards .card:nth-child(3) { grid-column: 1; }
.cards .card:nth-child(4) { grid-column: 2; grid-row: 1 / 3; }
.card {
  background: var(--color-ink); border: var(--rule-hair) solid var(--color-line); border-radius: var(--radius-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--dur-short) var(--ease-out);
}
.card:hover { border-color: oklch(81% 0.048 84 / 0.5); }
.card-img { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.cards .card:nth-child(4) .card-img { aspect-ratio: auto; flex: 1; min-height: 0; }
.card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.card:hover .card-img img { transform: scale(1.05); }
.card h3 { padding: 1.1rem 1.2rem 0.4rem; color: var(--color-tan); }
.card p { padding: 0 1.2rem 1.4rem; font-size: 0.88rem; color: var(--color-mute); }

/* ---- process ---- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.steps li { border-top: var(--rule-hair) solid var(--color-line); padding-top: 1.4rem; }
.step-num {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--color-tan); letter-spacing: 0.1em;
}
.steps h3 { margin: 0.6rem 0 0.5rem; }
.steps p { color: var(--color-mute); font-size: 0.92rem; }

/* ---- gallery strip ---- */
.work { background: var(--color-ink-2); padding-right: 0; }
.work .section-head { max-width: none; }
.drag-hint { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3em; color: var(--color-mute); margin-top: 0.8rem; }
.strip {
  display: flex; gap: 0.9rem;
  overflow-x: auto; padding: 0.5rem var(--page-gutter) 1.5rem 0;
  scroll-snap-type: x proximity;
  cursor: grab;
  scrollbar-width: thin; scrollbar-color: var(--color-tan) transparent;
}
.strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: oklch(81% 0.048 84 / 0.4); border-radius: 3px; }
.strip figure {
  flex: 0 0 auto; height: clamp(240px, 42vw, 420px);
  scroll-snap-align: start; overflow: hidden; border-radius: 4px;
}
.strip img {
  height: 100%; width: auto;
  transition: transform 0.5s var(--ease-out);
}
.strip figure:hover img { transform: scale(1.03); }

/* ---- cta ---- */
.cta {
  position: relative; overflow: hidden;
  padding: clamp(5rem, 12vw, 9rem) var(--page-gutter);
}
.cta-media { position: absolute; inset: -15% 0; z-index: 0; will-change: transform; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-shade { position: absolute; inset: 0; z-index: 1; background: oklch(12% 0.005 80 / 0.88); }
.cta-inner { position: relative; z-index: 2; max-width: 900px; }
.cta-inner > p { color: var(--color-mute); max-width: 28rem; margin-top: 1.2rem; }
.cta-phones {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 3rem); margin-top: 2.8rem;
}
.phone {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 5.5vw, 3.4rem); line-height: 1.1;
  padding: 1.1rem 2rem;
  border: var(--rule-hair) solid var(--color-line); border-radius: 6px;
  white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.phone:hover { border-color: var(--color-tan); color: var(--color-tan); }
.cta-email {
  display: inline-block; margin-top: 1.5rem;
  font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 600;
  color: var(--color-tan); border-bottom: var(--rule-hair) solid var(--color-tan);
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.cta-email:hover { color: var(--color-bone); border-color: var(--color-bone); }
/* ---- footer ---- */
.footer {
  padding: 3rem var(--page-gutter);
  border-top: var(--rule-hair) solid var(--color-line);
  text-align: center; color: var(--color-mute); font-size: 0.85rem;
}
.foot-brand {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; color: var(--color-bone);
  margin-bottom: 0.6rem; letter-spacing: 0.05em;
}
.foot-brand em {
  font-style: normal; font-family: var(--font-body);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; color: var(--color-mute);
}
.foot-phones a { color: var(--color-tan); white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); }
.foot-phones a:hover { color: var(--color-bone); }
.foot-email { margin-top: 0.5rem; }
.foot-email a { color: var(--color-tan); transition: color var(--dur-micro) var(--ease-out); }
.foot-email a:hover { color: var(--color-bone); }
.foot-copy { margin-top: 1rem; font-size: 0.72rem; opacity: 0.7; }

/* ---- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: oklch(9% 0.004 80 / 0.94);
  display: flex; align-items: center; justify-content: center;
  animation: lbFade 0.25s var(--ease-out);
}
.lightbox[hidden] { display: none; }
@keyframes lbFade { from { opacity: 0; } }
.lightbox img {
  max-width: 92vw; max-height: 88vh;
  border-radius: 4px; box-shadow: 0 20px 80px oklch(0% 0 0 / 0.6);
}
.lightbox button {
  position: absolute; background: none; border: none;
  color: var(--color-bone); font-size: 2.6rem; cursor: pointer;
  opacity: 0.7; transition: opacity var(--dur-micro) var(--ease-out); line-height: 1;
  padding: 0.5rem 1rem;
}
.lightbox button:hover { opacity: 1; }
.lightbox button:active { color: var(--color-tan); }
.lb-close { top: 1rem; right: 1.2rem; }
.lb-prev { left: 0.6rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0.6rem; top: 50%; transform: translateY(-50%); }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards .card:nth-child(3) { grid-column: auto; }
  .cards .card:nth-child(4) { grid-column: auto; grid-row: auto; }
  .cards .card:nth-child(4) .card-img { aspect-ratio: 16 / 9; flex: none; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .about-media { order: -1; max-width: 560px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .cta-phones { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .hero-cta .btn { flex: 1 1 100%; text-align: center; }
  .phone { width: 100%; text-align: center; font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .nav-actions { gap: 0.35rem; }
  .lang-toggle { padding: 0.44rem 0.52rem; font-size: 0.62rem; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media img { animation: none; }
  .marquee-track { animation: none; }
  .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-scroll span { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}