/*
 * Homepage. Loads on top of services.css, which supplies the shell, design
 * tokens, header, footer, buttons, section heads, steps and FAQ.
 */

/* ---- service lines ---- */

.hm-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1px;
  background: var(--rule);
  margin-top: 28px;
}

.hm-line {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: inherit;
  transition: background .15s;
}
.hm-line:hover { background: var(--bg-hover); }

.hm-line-media { display: block; height: 220px; overflow: hidden; background: var(--bg-image); }
.hm-line-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: var(--img-filter);
}

.hm-line-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; flex: 1; }

.hm-line-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hm-line-blurb { font-size: 0.95rem; line-height: 1.55; color: var(--text-muted); }
.hm-line-more {
  margin-top: auto;
  padding-top: 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* The "all services" card has no photo, so it centres its copy instead of
   leaving a hole where an image would be. */
.hm-line-all { justify-content: center; }
.hm-line-all .hm-line-body { flex: 0; }

/* ---- about ---- */

/* Centre the two columns against each other; the copy sets the row height. */
.hm-about { align-items: center; }
.hm-about .sv-split-left { padding-bottom: 64px; }

.hm-quote {
  margin: 0 0 22px;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--accent);
}
.hm-quote p {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.25;
  color: var(--ink);
}
.hm-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hm-about-body { font-size: 1.05rem; line-height: 1.65; color: var(--text-soft); }

/*
 * The artwork is portrait (1024x1536). Sized to the column width it rendered
 * 696x1044 -- taller than the viewport, next to about 200px of copy. It needs a
 * ceiling, not just the floor it had.
 *
 * Contained rather than covered, so the figure is shown whole: this is an
 * illustration of a person, and cropping it to fill a panel is what took the
 * heads off the service cards.
 */
.hm-about-media {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-image);
}
.hm-about-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 28rem;
  object-fit: contain;
  filter: var(--img-filter);
}

/* ---- why ---- */

.hm-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--rule);
  margin-top: 28px;
}
.hm-why li { background: var(--bg); padding: 26px 24px 28px 0; }
.hm-why li + li { padding-left: 24px; }
.hm-why h3 {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
}
.hm-why p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text-muted); }

/* ---- who we serve ---- */

.hm-serve {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--rule);
  margin-top: 28px;
}
.hm-serve li { display: flex; flex-direction: column; background: var(--bg); }

.hm-serve-media { display: block; height: 190px; overflow: hidden; background: var(--bg-image); }
.hm-serve-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: var(--img-muted);
  transition: filter .2s;
}
.hm-serve li:hover .hm-serve-media img { filter: var(--img-filter); }

.hm-serve-items { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 22px; }
.hm-serve-items span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.hm-serve-items span:first-child { color: var(--ink); }

/* ---- reviews ---- */

.hm-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--rule);
  margin-top: 28px;
}
.hm-reviews li {
  background: var(--bg-raised);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
}
.hm-stars { margin: 0 0 12px; color: var(--accent-text); letter-spacing: 0.14em; font-size: 0.95rem; }
.hm-reviews blockquote { margin: 0 0 16px; }
.hm-reviews blockquote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.hm-review-name {
  margin: auto 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- steps ---- */

.hm-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--rule);
  margin-top: 28px;
}
.hm-steps li {
  background: var(--bg);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 26px 22px 28px 0;
}
.hm-steps li + li { padding-left: 22px; }

@media (max-width: 900px) {
  .hm-about-media img { max-height: 20rem; }
  .hm-why li,
  .hm-why li + li { padding: 22px 0 24px; }
  .hm-steps li,
  .hm-steps li + li { padding: 22px 0 24px; }
  .hm-line-media { height: 180px; }
}

/* =========================================================================
   RHYTHM
   =========================================================================
   The homepage ran five consecutive card grids. Two of them change shape so
   the page has a cadence instead of a wallpaper pattern. Three grids in a row
   reads as a rhythm; five reads as one long grid.
   ========================================================================= */

/* ---- who we serve: a full-bleed strip ---- */

.hm-serve-section { padding-bottom: 0; }

/*
 * Edge to edge, no gaps, no card chrome. Six images become one wide band
 * rather than a fourth row of boxes, and the labels sit over the picture
 * instead of underneath it in their own panel.
 */
.hm-serve {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin: 28px 0 0;
  background: var(--bg-image);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.hm-serve li {
  position: relative;
  display: block;
  min-height: 20rem;
  overflow: hidden;
}
.hm-serve-media { position: absolute; inset: 0; display: block; }
.hm-serve-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: var(--img-muted);
  transition: filter .35s ease, transform .5s ease;
}
.hm-serve li:hover .hm-serve-media img {
  filter: var(--img-filter);
  transform: scale(1.04);
}

/* A scrim so the labels stay readable over whatever the photo does, and so the
   band does not read as six unrelated pictures. */
.hm-serve li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.15) 0%, rgba(var(--bg-rgb), 0.88) 100%);
  transition: background .35s ease;
}
.hm-serve li:hover::after {
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.05) 0%, rgba(var(--bg-rgb), 0.8) 100%);
}

.hm-serve-items {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 18px 22px;
}
.hm-serve-items span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.hm-serve-items span:first-child {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---- getting started: a run, not cards ---- */

/*
 * A horizontal track with a rule drawn through the numbers, so the four steps
 * read as a sequence. As four equal cards they read as four unrelated things,
 * which is the opposite of what "how it works" is trying to say.
 */
.hm-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  background: none;
  margin-top: 40px;
  position: relative;
}
.hm-track::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}
.hm-track li {
  display: block;
  background: none;
  padding: 0 20px 0 0;
  position: relative;
}
.hm-track-n {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--bg);
  border: 1px solid var(--accent);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-text);
}
.hm-track-body { display: block; margin-top: 18px; }

@media (max-width: 1100px) {
  .hm-serve { grid-template-columns: repeat(3, 1fr); }
  .hm-serve li { min-height: 16rem; }
  .hm-track { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  /* The rule only makes sense across a single row. */
  .hm-track::before { display: none; }
}

@media (max-width: 640px) {
  .hm-serve { grid-template-columns: repeat(2, 1fr); }
  .hm-serve li { min-height: 13rem; }
  .hm-track { grid-template-columns: 1fr; gap: 26px; }
}

/* =========================================================================
   ROUTER — "Tell us what is happening"
   =========================================================================
   Placed straight after the service lines, which is exactly where somebody
   who did not recognise a service name is about to leave. They arrive with a
   symptom; this turns it into the right line and carries the context into the
   quote form.

   The answers are plain visible markup until home.js marks the section ready.
   Without the script this is a list of eight links to the right pages — worse
   to look at, identical in what it can do.
   ========================================================================= */

.hm-router-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 28px;
}

.hm-intents {
  display: grid;
  gap: 1px;
  background: var(--rule);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-intent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 16px 20px;
  background: var(--bg);
  border: 0;
  /* The accent bar is the pressed state; transparent keeps the row from
     shifting when it appears. */
  border-left: 3px solid transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hm-intent:hover { background: var(--bg-hover); }
.hm-intent[aria-pressed="true"] {
  background: var(--bg-raised);
  border-left-color: var(--accent);
}

.hm-intent-label {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.hm-intent-hint {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hm-intent[aria-pressed="true"] .hm-intent-hint { color: var(--accent-text); }

.hm-answers {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 30px 32px;
  background: var(--bg-raised);
  min-height: 15rem;
}

/*
 * Before home.js runs, every answer is visible and stacked — a scriptless
 * visitor reads all eight rather than none. Once the section is marked ready
 * the panels behave, and the hidden attribute does the work.
 */
.hm-answer + .hm-answer { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule); }
[data-router="ready"] .hm-answer + .hm-answer { margin-top: 0; padding-top: 0; border-top: 0; }

.hm-answer:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.hm-answer-text {
  margin: 0;
  max-width: 52ch;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}
.hm-answer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 22px 0 0;
}
.hm-answer-more {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.hm-answer-more:hover { text-decoration: underline; }

/*
 * Nothing is chosen on load, so the panel would otherwise be an empty box.
 * This prompt fills it and tells the visitor what to do, and disappears the
 * moment an intent is picked.
 */
[data-router="ready"] .hm-answers::before {
  content: "Pick whichever sounds closest.";
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}
[data-router="ready"] .hm-answers:has(.hm-answer:not([hidden]))::before { content: none; }

@media (max-width: 900px) {
  .hm-router-grid { grid-template-columns: 1fr; }
  .hm-answers { min-height: 0; padding: 24px 20px 26px; }
  .hm-intent { padding: 14px 18px; }
}


/*
 * Stacked hero: show the artwork whole rather than crop it.
 *
 * When the hero collapses to one column the media becomes a wide, short band
 * — measured 885x378 at a 900px viewport. A square image in that loses 57% of
 * its height, and this artwork's subject runs top to bottom: the cylinders
 * down the left, the technician at mid height, the vanishing point beyond.
 *
 * So it is contained, not covered, once stacked. Same rule the blog cards, the
 * hub cards and the About portrait already follow, and the same reason: a crop
 * chosen by the viewport rather than by a person cuts whatever happens to be
 * at the edge. The panel background fills what the picture does not.
 *
 * On a phone the panel is already near-square, so contain and cover look
 * identical there — this only changes the tablet case it was made for.
 */
@media (max-width: 900px) {
  .sv-hero-media {
    min-height: 0;
    aspect-ratio: 1 / 1;
    max-height: 56vh;
  }
  .sv-hero-media img { object-fit: contain; }
}