/*
 * The marketing theme.
 *
 * One stylesheet, no build step and no external request: the publisher copies this file verbatim
 * into the snapshot, and the snapshot is served by an IIS site with no application behind it. A
 * webfont or a CDN stylesheet would be a third-party request on every page load of a site whose
 * whole point is that it has no runtime dependencies.
 */

:root {
  --ink: #16181d;
  --ink-soft: #4b5058;
  --paper: #ffffff;
  --paper-soft: #f5f6f8;
  --line: #e2e5ea;
  --accent: #1f5fd0;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaee;
    --ink-soft: #a3aab5;
    --paper: #101216;
    --paper-soft: #171a20;
    --line: #272b33;
    --accent: #7aa5f0;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-synthesis-weight: none;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark .logo {
  display: block;
  width: auto;
  height: 3rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--accent);
}

/*
 * Header layouts a site's design may choose (public-site-customizable-design plan, step 2). The
 * themes' own is logo left, menu right; these stack the two, centered or flush left.
 */
.masthead--layout-centered,
.masthead--layout-stacked {
  flex-direction: column;
  gap: 1rem;
}

.masthead--layout-centered { align-items: center; text-align: center; }
.masthead--layout-centered .nav { justify-content: center; }
.masthead--layout-stacked { align-items: flex-start; }

/*
 * The header image (public-site-customizable-design plan). Only a masthead carrying one gets a
 * masthead--img-* class, and it switches to a grid so the picture has a cell of its own: under the
 * menu, beside the logo, or as a band beneath both. The image is decorative (empty alt).
 */
.masthead[class*="masthead--img-"] {
  display: grid;
  align-items: center;
  gap: 0.75rem 2rem;
}

.masthead[class*="masthead--img-"] .wordmark { grid-area: mark; }
.masthead[class*="masthead--img-"] .nav { grid-area: nav; justify-content: flex-end; }
.masthead[class*="masthead--img-"] .header-image { grid-area: img; }

.header-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 4.5rem;
}

/* Under the menu, standing on the masthead's rule — the way the truck stands on the letterhead's. */
.masthead--img-undernav {
  grid-template-columns: auto 1fr;
  grid-template-areas: "mark nav" "mark img";
  padding-bottom: 0;
}

.masthead--img-undernav .wordmark { align-self: center; padding-bottom: 1.75rem; }
.masthead--img-undernav .header-image { justify-self: end; align-self: end; }

.masthead--img-besidelogo {
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "mark img nav";
}

.masthead--img-besidelogo .header-image img { height: 3rem; }

.masthead--img-band {
  grid-template-columns: auto 1fr;
  grid-template-areas: "mark nav" "img img";
}

.masthead--img-band .header-image img {
  width: 100%;
  height: auto;
  max-height: 14rem;
  object-fit: cover;
}

/* A stacked layout with a header image: one column, image last, the alignment the layout says. */
.masthead--layout-centered[class*="masthead--img-"],
.masthead--layout-stacked[class*="masthead--img-"] {
  grid-template-columns: 1fr;
  grid-template-areas: "mark" "nav" "img";
}

.masthead--layout-centered[class*="masthead--img-"] { justify-items: center; }
.masthead--layout-centered[class*="masthead--img-"] .nav { justify-content: center; }
.masthead--layout-stacked[class*="masthead--img-"] { justify-items: start; }
.masthead--layout-stacked[class*="masthead--img-"] .nav { justify-content: flex-start; }
.masthead--layout-centered.masthead--img-undernav .wordmark,
.masthead--layout-stacked.masthead--img-undernav .wordmark { padding-bottom: 0; }
.masthead--layout-centered[class*="masthead--img-"] .header-image { justify-self: center; }
.masthead--layout-stacked[class*="masthead--img-"] .header-image { justify-self: start; }

@media (max-width: 40rem) {
  .masthead[class*="masthead--img-"] {
    grid-template-columns: 1fr;
    grid-template-areas: "mark" "nav" "img";
  }

  .masthead[class*="masthead--img-"] .nav { justify-content: flex-start; }
  .masthead--img-undernav .wordmark { padding-bottom: 0; }
  .masthead--img-undernav .header-image { justify-self: start; }
  .header-image img { height: 3rem; }
}

/* ── Content ──────────────────────────────────────────────────────────────── */

main {
  padding: 3rem 0 4rem;
}

/*
 * The reading column is CENTERED under the masthead: on a wide screen a left-pinned 68ch column
 * leaves the right of the header and footer empty. The hero centers with it. A site's design can
 * choose full width instead (PublicSiteDesigns, "Text width").
 */
.hero {
  padding: 2rem 0 3rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3rem;
  text-align: center;
}

.hero h1 {
  max-width: 20ch;
  margin: 0 auto;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.lede {
  max-width: 48ch;
  margin: 1rem 0 0;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.hero .lede {
  margin: 1rem auto 0;
}

/* A hero section the author set to the left keeps the old left-aligned look. */
.hero.section--align-left { text-align: left; }
.hero.section--align-left h1,
.hero.section--align-left .lede { margin-left: 0; }

.prose {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.prose h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.prose h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.125rem;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.1rem;
}

.prose a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

.prose img,
.hero img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.hero-image {
  display: block;
  margin: 1.5rem 0 2rem;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--line);
  color: var(--ink-soft);
}

.prose code {
  padding: 0.15em 0.35em;
  background: var(--paper-soft);
  border-radius: 4px;
  font-size: 0.9em;
}

/* Wide content scrolls inside itself rather than making the page scroll sideways. */
.prose pre,
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.prose pre {
  padding: 1rem;
  background: var(--paper-soft);
  border-radius: 8px;
}

.prose table {
  border-collapse: collapse;
  white-space: nowrap;
}

.prose th,
.prose td {
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

/* ── Sections (public-site-page-sections plan) ────────────────────────────── */
/* A page built from sections: each one a band of the page, in the theme's colors and fonts. */

.sections > .section + .section { margin-top: 3rem; }

.button {
  display: inline-block;
  padding: 0.65rem 1.2rem;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.button:hover,
.button:focus-visible { filter: brightness(1.1); }

.section h2 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.75rem; }

.section--align-center { text-align: center; }
.section--align-center h1,
.section--align-center .lede { margin-left: auto; margin-right: auto; }
.sections > .hero { margin-bottom: 0; }

.section--image-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.section--image-text img { width: 100%; height: auto; border-radius: 6px; }
.section--image-right img { order: 2; }

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
}

.card {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.card img { width: 100%; height: auto; border-radius: 4px; margin-bottom: 0.75rem; }
.card h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.card h3 a { color: var(--accent); text-decoration: none; }
.card p { margin: 0 0 0.5rem; color: var(--ink-soft); }

.section--cta { padding: 2rem; border-radius: 8px; text-align: center; }
.section--bg-accent { background: var(--accent); color: #fff; }
.section--bg-accent .button { background: #fff; color: var(--accent); }
.section--bg-soft { background: var(--paper-soft); }

.section--contact-block address { font-style: normal; display: flex; flex-direction: column; gap: 0.15rem; }
.section--contact-block a { color: var(--accent); }

.section--image-band { margin-left: 0; margin-right: 0; }
.section--image-band img { display: block; width: 100%; height: 20rem; object-fit: cover; border-radius: 6px; }
.section--image-band.section--size-small img { height: 12rem; }
.section--image-band.section--size-large img { height: 30rem; }
.section--image-band figcaption { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.9rem; }

.section--spacer { height: 2rem; }
.section--spacer.section--size-small { height: 1rem; }
.section--spacer.section--size-large { height: 5rem; }

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.gallery figcaption { margin-top: 0.35rem; font-size: 0.85rem; color: var(--ink-soft); }

.testimonials { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.testimonials blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--accent); font-size: 1.05rem; }
.testimonials .attribution { margin: 0.4rem 0 0 1rem; color: var(--ink-soft); }

/* ── Header and footer areas (phase 5) ───────────────────────────────────── */

.region--header { margin: 0 -1.5rem; }
.region--header > .section,
.region--header > .announcement { margin: 0; }

.announcement {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
  text-align: center;
  background: var(--paper-soft);
}

.announcement a { color: inherit; font-weight: 600; }
.announcement.section--bg-accent { background: var(--accent); color: #fff; }
.announcement.section--bg-none { background: none; }

.region--header .section--contact-block address {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.85rem;
}

.region--footer { width: 100%; margin-bottom: 1.25rem; }

/* Rich text in an area spans the area: the reading width that suits a page's paragraphs left a
   centered letterhead list wrapping off to one side of the footer. */
.region .prose { max-width: none; }
.region--footer > * + * { margin-top: 1rem; }
.region--footer .section h2,
.footer-column h2 { font-size: 0.95rem; margin: 0 0 0.35rem; }

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem 2rem;
}

.footer-column p { margin: 0 0 0.25rem; }

/* A footer list set like a letterhead's: one centered line, the items dot-separated. */
ul.letterhead {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
}

ul.letterhead li + li::before {
  content: "\2022";
  margin-right: 1.25rem;
  color: var(--accent);
}
.footer-column a { color: inherit; }

@media (max-width: 40rem) {
  .section--image-text { grid-template-columns: 1fr; }
  .section--image-right img { order: 0; }
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

footer a {
  color: inherit;
}

/* ── Enquiry form ─────────────────────────────────────────────────────────── */

/*
 * Rendered by contact.hbs, and only on a site that has a contact address. Single column at every
 * width: a two-column form saves a little space and costs a lot of tab-order confusion, and this
 * one is six fields long.
 */

.enquiry {
  max-width: var(--measure);
  margin: 2.5rem auto 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-soft);
}

.enquiry h2 {
  margin-top: 0;
}

.enquiry .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.enquiry label {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* The line under an input that says what shape the answer takes. Quieter than the label and tied
   to the field by aria-describedby, so a screen reader hears it as part of the field rather than
   as a stray paragraph. */
.enquiry .hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* A group of short fields that read as one question — the City / State / ZIP row, and any sizing
   question a site on this theme grows later. */
.enquiry .field-group {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.enquiry .field-group legend {
  padding: 0;
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.enquiry .field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.enquiry .field-row .field {
  flex: 1 1 6rem;
  min-width: 6rem;
}

/* A field the form has just refused. Color is not the only signal — the status line says what is
   wrong and focus moves to the input — but it is what points at WHICH field.

   The textarea is included because the server can name ANY field in a 400, not just the two the
   page checks itself; a flag the stylesheet does not cover would move focus to a box that looks
   untouched. */
.enquiry input[aria-invalid='true'],
.enquiry textarea[aria-invalid='true'] {
  border-color: var(--danger, #b3261e);
}

/* The address suggestions.

   Anchored to the field rather than floated over the page: this is one form in a normal document
   flow, and a fixed-position dropdown would need scroll handling for no gain. The field is
   position: relative so the list hangs off it. */
.enquiry .field {
  position: relative;
}

.enquiry .suggestions {
  position: absolute;
  z-index: 5;

  /* Under the input and the hint, whatever their heights come out as. */
  top: 100%;
  left: 0;
  right: 0;

  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;

  max-height: 15rem;
  overflow-y: auto;

  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.enquiry .suggestions li {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.92rem;
}

/* Hover and keyboard selection look the SAME. A list where arrowing down highlights differently from
   pointing at it is two controls wearing one coat. */
.enquiry .suggestions li:hover,
.enquiry .suggestions li.is-active {
  background: var(--paper-soft);
}

.enquiry input,
.enquiry textarea {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);

  /* Inherited rather than assumed: the theme sets no webfont, so this follows whatever the body
     resolved to instead of dropping the inputs back to the browser default. */
  font: inherit;
}

/* Never removed, only replaced. Taking the outline away without putting something visible back is
   the single most common way a form becomes unusable by keyboard. */
.enquiry input:focus-visible,
.enquiry textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.enquiry textarea {
  resize: vertical;
}

.enquiry button {
  padding: 0.6rem 1.4rem;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.enquiry button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Empty until something is said, so it takes no space and is not announced. */
.enquiry-status:empty {
  display: none;
}

.enquiry-status {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
}

.enquiry-status.is-error {
  /* Not color alone — the wording carries the meaning, because roughly one man in twelve cannot
     rely on the red. */
  color: #b3261e;
}

@media (prefers-color-scheme: dark) {
  .enquiry-status.is-error {
    color: #f2b8b5;
  }
}