/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: custom (brand-locked)
 * vibe: fine-press copper & linen · paper #F5F1EC · accent copper #8A5136/#B5765A (warm)
 * display: Cinzel (roman, caps, tracked) · body: Jost · nav: N6 masthead (simplified)
 * footer: Ft1 mast-headed on Ink · enrichment: brand SVG mark (supplied, Tier B)
 * audience: IT & facilities managers retiring equipment · use: call / request pickup
 * axes: light paper / classical-serif display / warm accent
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 */

/* ---------- base ------------------------------------------------ */
/* Phones rubber-band past the end of the document. The exposed strip is
   painted with the canvas background, which propagates up from body when
   html has none of its own — linen, directly under an ink footer, so the
   bounce reads as a band of white below the page. Stop the bounce where
   the browser supports it, and give html the footer's ink so that any
   browser that bounces anyway exposes ink rather than white. body keeps
   the paper, which now paints only its own box. */
html {
  overflow-x: clip;
  overscroll-behavior-y: none;
  background: var(--color-ink);
}
body { overflow-x: clip; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
/* Cinzel is reserved for the nameplate and each page's one big headline;
   working headings are Jost — company, not wedding invitation. */
h1 { font-family: var(--font-display); font-weight: 600; }
h2, h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; }

p { margin: 0 0 var(--space-md); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

img, svg { max-width: 100%; height: auto; }

a {
  color: var(--color-copper-deep);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
a:hover { border-bottom-color: var(--color-copper); color: var(--color-ink); }
a:active { color: var(--color-copper-deep); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-chip);
}

::selection { background: var(--color-copper-light); color: var(--color-ink); }

.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-copper-deep);
}

.muted { color: var(--color-muted); }

.wrap { padding-inline: var(--page-gutter); max-width: var(--wrap-max); margin-inline: auto; }

/* ---------- top bar ------------------------------------------------
   One sticky working header: lockup left, nav right. The nameplate
   masthead is gone — a local company's header is a bar, not a banner.
   The double rule survives as the bar's bottom edge. */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-paper);
  border-bottom: 3px double var(--color-ink);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  flex-wrap: wrap;
  min-height: 3.5rem;
  padding-block: var(--space-xs);
}
.topbar__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-bottom: 0;
  color: var(--color-ink);
}
.topbar__lockup:hover { color: var(--color-ink); }
.topbar__lockup img { width: 30px; height: 41px; }
.topbar__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  line-height: 1.1;
}
.topbar__sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-copper-deep);
  margin-top: 2px;
}
.topbar nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar nav a {
  display: inline-block;
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom-color: transparent;
  white-space: nowrap;
  padding: var(--space-2xs) 0;
}
.topbar nav a:hover { border-bottom-color: var(--color-copper); }
.topbar nav a[aria-current="page"] {
  color: var(--color-copper-deep);
  border-bottom-color: var(--color-copper-deep);
}
.topbar__tel { color: var(--color-copper-deep); font-weight: 600; }

/* Anchor targets clear the pinned bar instead of hiding beneath it. */
[id] { scroll-margin-top: 5rem; }

/* ---------- hero (Split Studio diptych) -------------------------- */
.hero { padding-block: var(--space-2xl); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(0, 9fr);
  gap: var(--space-xl);
  align-items: center;
}

.hero h1 {
  font-size: var(--text-display);
  letter-spacing: 0.05em;
}
.hero h1 .turn { color: var(--color-copper-deep); }

.hero__lede {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-muted);
}

.hero__cta { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* The truck is a real outdoor scene, so it gets shown as a photograph,
   held inside its grid column so its right edge lines up with the rest
   of the page rather than running out to the viewport. The plate is 3:2,
   the same ratio as the file, so the whole truck reads uncropped. A
   copper hairline on the inner edge sets the photograph off from the
   page. If the image file is missing the figure hides itself (onerror in
   the markup) instead of breaking. */
.hero__plate { margin: 0; }

.hero__plate-img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: min(50vh, 22rem);   /* only binds on short viewports */
  overflow: hidden;
}
.hero__plate-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;   /* square on the ratio, so this only matters when max-height crops */
  display: block;
}
.hero__plate-img::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--color-copper);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.hero h1, .hero__lede, .hero__cta, .hero__plate {
  animation: rise var(--dur-major) var(--ease-out) both;
}
.hero__lede  { animation-delay: 90ms; }
.hero__cta   { animation-delay: 180ms; }
.hero__plate { animation-delay: 140ms; }

/* ---------- buttons --------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-chip);
  color: var(--color-card);
  background: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-copper-deep); border-color: var(--color-copper-deep); color: var(--color-card); border-bottom-color: var(--color-copper-deep); }
.btn:active { transform: translateY(1px); }

.textlink {
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- sections --------------------------------------------- */
.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-2xl); }
.section + .section { padding-top: 0; }

.section__head { max-width: var(--measure); margin-bottom: var(--space-xl); }
.section__head h2 {
  font-size: var(--text-xl);
  letter-spacing: 0.06em;
}
.section__head .lede { margin-top: var(--space-md); color: var(--color-muted); font-weight: 300; }

/* services index — fine-press contents list */
.svc-index { border-top: var(--rule-hair) solid var(--color-ink); list-style: none; margin: 0; padding: 0; }
.svc-index li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.svc-index a {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  gap: var(--space-lg);
  align-items: baseline;
  padding: var(--space-lg) var(--space-2xs);
  border-bottom: 0;
  color: var(--color-ink);
  transition: background var(--dur-micro) var(--ease-out),
              padding-left var(--dur-minor) var(--ease-out);
}
.svc-index a:hover { background: var(--color-card); padding-left: var(--space-sm); }
.svc-index h3 {
  font-size: var(--text-md);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.svc-index .svc-index__note { color: var(--color-muted); font-weight: 300; margin: 0; }
.svc-index .svc-index__go { color: var(--color-copper-deep); font-size: var(--text-lg); }

/* diptych rows (Split Studio body) */
.dip {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: start;
  padding-block: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.dip:first-of-type { border-top: 0; }
.dip--flip .dip__text { order: 2; }
.dip--flip .dip__side { order: 1; }

.dip h2, .dip h3 { font-size: var(--text-lg); letter-spacing: 0.06em; margin-bottom: var(--space-md); }
.dip__text .body { color: var(--color-muted); font-weight: 300; }

.pull {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0;
  border-left: 2px solid var(--color-copper);
  padding-left: var(--space-lg);
  margin: 0;
  max-width: 30ch;
}
.pull cite { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-soft); margin-top: var(--space-md); }

/* included list — proof column of a diptych */
.inc { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.inc li {
  display: flex; gap: var(--space-sm); align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
}
.inc li::before { content: "·"; color: var(--color-copper); font-weight: 700; }
.inc--head { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-copper-deep); font-weight: 500; margin-bottom: var(--space-sm); display: block; }

/* who we serve */
.serve { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-lg); }
.serve div { border-top: 2px solid var(--color-ink); padding-top: var(--space-sm); min-width: 0; }
.serve h3 { font-size: var(--text-sm); letter-spacing: 0.06em; margin-bottom: var(--space-xs); }
.serve p { font-size: var(--text-sm); color: var(--color-muted); font-weight: 300; }

/* CTA band */
.cta-band {
  background: var(--color-paper-2);
  padding-block: var(--space-2xl);
}
.cta-band__grid { display: flex; flex-wrap: wrap; gap: var(--space-xl) var(--space-2xl); align-items: center; justify-content: space-between; }
.cta-band__text { flex: 1 1 26ch; min-width: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
/* tracked caps eat horizontal room — ease the tracking so the line count stays low */
.cta-band h2 { font-size: var(--text-xl); letter-spacing: 0.06em; max-width: 30ch; }
.cta-band .cta-note { color: var(--color-muted); font-weight: 300; margin-top: var(--space-sm); }

/* ---------- page heads (inner pages) ------------------------------ */
.pagehead { padding-block: var(--space-2xl) var(--space-xl); }
.pagehead h1 { font-size: var(--text-display-s); letter-spacing: 0.08em; }
.pagehead .lede { margin-top: var(--space-md); font-size: var(--text-lg); font-weight: 300; color: var(--color-muted); }

/* contact */
.tel-display {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-display-s);
  letter-spacing: 0.02em;
  color: var(--color-ink);
  border-bottom: 0;
  white-space: nowrap;
}
.tel-display:hover { color: var(--color-copper-deep); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }

dl.facts { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
dl.facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-lg); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
dl.facts dt { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-copper-deep); font-weight: 500; }
dl.facts dd { margin: 0; }

.label--h { border: 0; margin: 0; }
.tel-wrap { margin-top: var(--space-md); }
.contact-note { font-weight: 300; }
.contact-note--first { margin-top: var(--space-sm); }
.contact-note--gap { margin-top: var(--space-md); }
.contact-cta { margin-top: var(--space-xl); }

/* ---------- footer (Ft1 on Ink) ----------------------------------- */
.foot {
  background: var(--color-ink);
  color: var(--color-paper-on-ink);
  margin-top: var(--space-2xl);
  padding-block: var(--space-2xl);
}
.cta-band + .foot, .section:last-of-type + .foot { margin-top: 0; }
.foot__grid { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: center; justify-content: space-between; }
.foot__brand { display: flex; align-items: center; gap: var(--space-md); }
.foot__brand img { width: 36px; height: 49px; }
.foot__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: 0.08em; text-transform: uppercase; }
.foot__tag { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-copper-light); margin-top: var(--space-2xs); }
.foot a { color: var(--color-paper-on-ink); border-bottom-color: transparent; white-space: nowrap; }
.foot a:hover { color: var(--color-copper-light); border-bottom-color: var(--color-copper-light); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-sm); letter-spacing: 0.08em; }
.foot__fine { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink-2); font-size: var(--text-xs); color: var(--color-soft); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); justify-content: space-between; }
.foot__fine p { margin: 0; max-width: none; }

/* ---------- responsive -------------------------------------------- */
/* Between the one-column breakpoint and wide desktop the type column is
   too narrow to hold tracked caps at full display size, and "TECHNOLOGY"
   breaks mid-word. Step size and tracking down across that band only. */
@media (min-width: 60.0625rem) and (max-width: 75rem) {
  .hero h1 { font-size: clamp(2.375rem, 1rem + 4.4vw, 3.75rem); letter-spacing: 0.04em; }
}

@media (max-width: 60rem) {
  .hero__grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-index .svc-index__go { display: none; }
  /* stacked, the headline and the phone number lead; the plate follows
     as a full-bleed band rather than pushing the CTA off the screen */
  .hero__plate { margin-top: var(--space-lg); }
  .hero__plate-img {
    width: calc(100% + var(--page-gutter) * 2);
    margin-inline-start: calc(var(--page-gutter) * -1);
    max-height: none;
  }
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .dip { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .dip--flip .dip__text { order: 1; }
  .dip--flip .dip__side { order: 2; }
  .serve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-index a { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-index .svc-index__note { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  /* compact two-row bar: lockup up top, links in one dense row below */
  .topbar__inner { min-height: 0; padding-block: var(--space-xs) var(--space-2xs); row-gap: 0; justify-content: center; }
  .topbar__lockup img { width: 22px; height: 30px; }
  .topbar__name { font-size: 0.95rem; }
  .topbar__sub { font-size: 0.5rem; letter-spacing: 0.14em; }
  .topbar nav { flex-basis: 100%; }
  .topbar nav ul { justify-content: center; gap: 0 var(--space-sm); }
  .topbar nav a { font-size: 0.7rem; letter-spacing: 0.04em; padding-block: 0; min-height: 34px; }
  [id] { scroll-margin-top: 6rem; }
  /* wide-tracked Cinzel caps break long words at narrow widths — step tracking down */
  .hero h1 { letter-spacing: 0.03em; font-size: clamp(1.9rem, 1.2rem + 4.5vw, 2.75rem); }
  .serve { grid-template-columns: minmax(0, 1fr); }
  dl.facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .section { padding-block: var(--space-2xl); }
}

@media (pointer: coarse) {
  .btn, .topbar nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}