/* Consolidated Services, Inc. — custom-coded mockup, Untamed Web Design, Sept 2026
   CONCEPT: "the plant, labelled." The page reads like a refrigeration plant reads to the
   people who run it: every pipe carries a marker band naming what is inside and an arrow
   for which way it flows (the IIAR ammonia pipe marker). Captions and the call are set as
   those markers, and the signature is their own glycol-conversion pitch drawn as the plant:
   ammonia held behind the engine-room wall, food-grade glycol run out to the room coils.
   COLOR: galvanized sheet and cold shadow sampled from their own condenser photograph
   (cold-storage-a.jpg), the safety orange from the button on their current site header,
   glycol blue from the BAC badge on that same condenser.
   TYPE: Big Shoulders Display (condensed American industrial signage, the narrow capitals
   stencilled on plant equipment) + Atkinson Hyperlegible (drawn for legibility at a glance,
   the way a label in a freezer has to be read).
*/
:root {
  --ink: #111a21;          /* the shadow under the condenser fans */
  --galv: #c7cdd1;         /* galvanized panel, condenser casing */
  --frost: #eef2f3;        /* cold white: the page ground */
  --steel: #4e5b64;        /* secondary text, rivet-line grey biased blue */
  --marker: #e3701e;       /* their header button orange: the pipe marker and the call */
  --glycol: #1f5f80;       /* BAC badge blue, deepened: the glycol line */
  --white: #ffffff;
  --focus: #0e4f70;
  --focus-dark: #f6b37f;

  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --t-hero: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);   /* 44 -> 76 px */
  --t-h2: clamp(2rem, 1.45rem + 2.2vw, 2.75rem);        /* 32 -> 44 px */
  --t-quote: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --t-body: 1.125rem;                                   /* 18 px */
  --t-small: 0.9375rem;

  --gutter: 16px;
  --max: 1240px;
  --space: clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --header: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
body {
  margin: 0;
  background: var(--frost);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
.call__alt { margin-top: 16px; }
.loop__pipe .marker { margin: 0; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: var(--t-h2); }
p { margin: 0 0 1em; max-width: 36em; }
a { color: var(--glycol); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--focus-dark); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--marker); color: var(--ink); padding: 12px 16px; font-weight: 700;
}
.skip:focus { top: 8px; }

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

/* ---------- the pipe marker ---------- */
.marker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.1;
  background: var(--galv); color: var(--ink);
  padding: 7px 12px 7px 12px;
  border-left: 8px solid var(--marker);
}
.marker svg { flex: none; width: 26px; height: 14px; fill: var(--marker); }
.marker small { font-family: var(--body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: none; }
.marker--call {
  background: var(--marker); border-left-color: var(--ink);
  font-size: 1.3rem; padding: 12px 18px 12px 16px; min-height: 52px;
  text-decoration: none; color: var(--ink);
}
.marker--call svg { fill: var(--ink); width: 30px; height: 16px; }
.marker--call:hover { background: #f08a3e; }
.marker--glycol { background: var(--glycol); color: var(--white); border-left-color: #8fc7e3; }
.marker--glycol svg { fill: #8fc7e3; }

/* caption set as a marker band beneath a photograph */
.cap {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; font-size: var(--t-small); color: var(--steel); line-height: 1.45;
}
.cap::before {
  content: ""; flex: none; width: 34px; height: 8px; background: var(--marker);
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
  transform: translateY(-1px);
}

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); color: var(--white);
  border-bottom: 3px solid var(--marker);
}
.site-head__bar {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--header); max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  position: relative;
}
.brand { display: inline-flex; flex-direction: column; color: var(--white); text-decoration: none; line-height: 1; padding-block: 6px; margin-right: auto; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: 0.02em; }
.brand__sub { font-family: var(--display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.32em; color: var(--galv); margin-top: 3px; }
.menu-btn {
  display: none; align-items: center; justify-content: center;
  min-height: 44px; min-width: 64px; padding: 0 12px;
  background: transparent; color: var(--white); border: 1px solid #5d6a73;
  font: 700 0.95rem var(--body); cursor: pointer;
}
.menu-btn[aria-expanded="true"] { border-color: var(--marker); }
.head-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  background: var(--marker); color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.05em; white-space: nowrap;
}
.head-call:hover { background: #f08a3e; }
.head-call__num { display: none; }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: flex; align-items: center; min-height: 48px;
  color: var(--white); text-decoration: none; font-weight: 700; font-size: 1.05rem;
}
.nav a[aria-current="page"] { color: var(--marker); }
.nav a:hover { text-decoration: underline; }

/* phone: nav is a panel under the bar (JS on); a plain list with JS off */
.nav { padding: 0 var(--gutter) 12px; }
.js .nav { display: none; }
.js .menu-btn { display: inline-flex; }
.js .nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: calc(100% + 3px);
  background: var(--ink); border-bottom: 3px solid var(--marker);
  padding: 4px var(--gutter) 16px;
}
.nav li + li { border-top: 1px solid #2c3842; }

/* JS off: the nav drops to its own full-width row as a plain list */
.site-head__bar { flex-wrap: wrap; }
html:not(.js) .nav { flex-basis: 100%; order: 3; }
@media (max-width: 374px) {
  .brand__name { font-size: 1.2rem; }
  .brand__sub { font-size: 0.72rem; letter-spacing: 0.26em; }
  .site-head__bar { gap: 8px; }
  .menu-btn { min-width: 56px; padding: 0 8px; }
  .head-call { padding: 0 10px; }
}
@media (min-width: 480px) {
  .head-call__num { display: inline; }
  .head-call__short { display: none; }
}
@media (min-width: 1100px) {
  .js .menu-btn { display: none; }
  .site-head__bar { flex-wrap: nowrap; }
  .nav, .js .nav, html:not(.js) .nav { display: block; position: static; padding: 0; margin-right: 8px; flex-basis: auto; order: 0; }
  .nav ul { display: flex; gap: 22px; }
  .nav li + li { border: 0; }
  .nav a { font-size: 0.98rem; }
  .brand { margin-right: auto; }
}

/* ---------- hero ---------- */
.hero { position: relative; color: var(--white); background: var(--ink); isolation: isolate; }
.hero__photo { position: absolute; inset: 0; z-index: -2; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(17,26,33,0.97) 0%, rgba(17,26,33,0.92) 45%, rgba(17,26,33,0.7) 58%, rgba(17,26,33,0.25) 72%, rgba(17,26,33,0) 84%);
}
.hero__inner {
  min-height: calc(100svh - var(--header) - 3px);
  max-height: 940px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 42svh; padding-bottom: 28px;
}
.hero h1 { font-size: var(--t-hero); max-width: 21ch; }
.hero__deck { font-size: 1.15rem; line-height: 1.55; color: #e4e9ec; margin: 16px 0 22px; max-width: 34em; }
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero__note { font-size: var(--t-small); color: var(--galv); margin: 0; }

@media (min-width: 900px) {
  .hero__inner { padding-top: 34vh; padding-bottom: 56px; min-height: min(92vh, 900px); }
  .hero::before {
    background: linear-gradient(to top, rgba(17,26,33,0.95) 0%, rgba(17,26,33,0.82) 34%, rgba(17,26,33,0.2) 60%, rgba(17,26,33,0) 75%);
  }
  .hero__photo img { object-position: 50% 42%; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--space) 0; }
.grid { display: grid; gap: 28px; }
.lede { font-size: 1.2rem; }
.more { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* the four refrigerants: photograph with marker bands across it */
.plant figure { margin: 0; }
.plant__photo { position: relative; }
.plant__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plant__markers {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: 0; bottom: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.plant__text h2 { margin-bottom: 20px; }
@media (min-width: 900px) {
  .plant .grid { grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
  .plant__photo img { aspect-ratio: 16 / 10; }
  .plant__markers { bottom: 28px; }
}

/* the glycol conversion */
.glycol .grid { align-items: start; }
.glycol h2 { margin-bottom: 20px; max-width: 18ch; }
.glycol__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.glycol__figure { margin: 48px 0 0; }
@media (min-width: 900px) {
  .glycol .grid { grid-template-columns: 5fr 7fr; gap: 56px; }
}

.loop {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.loop__plant {
  background: var(--ink); color: var(--white);
  padding: 22px 20px 24px;
  border-bottom: 10px solid var(--galv);   /* the engine-room wall */
}
.loop__label { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 14px; }
.loop__gear {
  display: flex; gap: 12px; flex-wrap: wrap;
  border: 6px solid var(--marker); padding: 14px; margin-bottom: 16px;
}
.loop__unit {
  flex: 1 1 8rem; background: #22303a; color: var(--white);
  padding: 12px; font-weight: 700; font-size: 1rem; text-align: center;
}
.loop__plant .marker { background: var(--marker); border-left-color: var(--white); }
.loop__plant .marker svg { fill: var(--ink); }
.loop__pipe {
  position: relative; padding: 28px 0 28px 46px;
}
.loop__pipe::before {
  content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 12px; background: var(--glycol);
}
.loop__rooms { list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; gap: 10px; }
.loop__room {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border-left: 12px solid var(--glycol);
  padding: 14px 16px; font-weight: 700;
}
.loop__room svg { flex: none; width: 64px; height: 30px; stroke: var(--glycol); fill: none; stroke-width: 3; }
.loop__room span { display: block; font-weight: 400; color: var(--steel); font-size: var(--t-small); }
.glycol__figure figcaption { margin-top: 18px; }
@media (min-width: 900px) {
  .loop { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 5fr); align-items: center; }
  .loop__plant { border-bottom: 0; border-right: 12px solid var(--galv); padding: 32px 28px; }
  .loop__pipe { padding: 0 18px 30px; align-self: center; }
  .loop__pipe::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 12px; }
  .loop__rooms { padding: 0; }
}

/* quarterly check-ups */
.checkups__quote {
  font-family: var(--display); font-weight: 700; font-size: var(--t-quote); line-height: 1.15;
  margin: 24px 0 8px; max-width: 26em; padding-left: 20px; border-left: 8px solid var(--marker);
}
.checkups__quote p { max-width: none; margin: 0; }
.checkups__who { font-size: var(--t-small); color: var(--steel); margin: 0 0 32px 28px; }
.checkups__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 50%; }
@media (min-width: 900px) {
  .checkups__photo img { aspect-ratio: 21 / 9; }
}

/* heating and air: their own rooftop photograph */
.hvac__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hvac blockquote { margin: 0 0 1em; padding: 0; font-size: 1.2rem; font-style: italic; max-width: 32em; }
.hvac blockquote p { margin: 0; }
.hvac h2 { margin-bottom: 20px; }
@media (min-width: 900px) {
  .hvac .grid { grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; }
}

/* the family */
.family h2 { margin-bottom: 20px; max-width: 20ch; }
.family__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 35% 50%; }
@media (min-width: 900px) {
  .family .grid { grid-template-columns: 5fr 6fr; gap: 56px; align-items: end; }
  .family__photo { margin-bottom: -96px; position: relative; z-index: 1; }
}
.values {
  background: var(--ink); color: var(--white);
  padding-block: 56px;
  margin-top: 56px;
}
.values blockquote { margin: 0; }
.values blockquote p {
  font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  line-height: 1.05; max-width: 20ch; margin: 0 0 14px;
}
.values figcaption { color: var(--galv); font-size: var(--t-small); }
@media (min-width: 900px) {
  .values { padding-block: 152px 88px; margin-top: 0; }
}

/* the call */
.call__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 60%; }
.call h2 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); margin: 32px 0 18px; max-width: 18ch; }
.call__block { padding-bottom: var(--space); }
.call__where { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; font-size: 1rem; }
.call__where strong { display: block; font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 900px) {
  .call__photo img { aspect-ratio: 21 / 8; }
  .call__block { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; }
  .call__where { margin-top: 0; }
}

/* ---------- stub pages ---------- */
.stub { padding-block: var(--space); }
.stub h1 { font-size: var(--t-hero); max-width: 16ch; margin-bottom: 24px; }
.stub p { font-size: 1.2rem; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: #d5dbdf; padding-block: 56px 32px; font-size: 1rem; }
.site-foot a { color: var(--white); }
.site-foot .grid { gap: 32px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: 40px; }
.site-foot .brand { margin-bottom: 14px; }
.site-foot__mock { margin-top: 40px; padding-top: 16px; border-top: 1px solid #2c3842; font-size: 0.85rem; color: #aeb7bd; max-width: none; }
@media (min-width: 900px) {
  .site-foot .grid { grid-template-columns: 5fr 3fr 4fr; }
}

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}