/* ============================================================
   site.css - Quinprint. Loads after base.css, survives every update.

   Branding owns the palette, fonts, and heading levels; they arrive as
   --color-*, --font-*, and --h1-* through --h6-*. This file names the
   palette the way the design does, sets the tokens Branding cannot
   express, and styles the site-wide components. Page sections follow
   below the components, one group per section class.

   Token names follow the design brief, with two exceptions where the
   engine already uses the name for something else:
     --border   is the engine's border shorthand, so the colour is --border-colour.
     --muted    is the engine's secondary text, so it is pointed at --body
                (which passes contrast) and the fine-print grey is --fineprint.
   ============================================================ */

/* ---- Tokens --------------------------------------------------------------- */
:root {
  /* Colour: Branding's custom colours under the design's names */
  --grape:         var(--color-action);
  --grape-dark:    var(--color-grape-dark);
  --grape-deep:    var(--color-grape-deep);
  --night:         var(--color-night);
  --night-mid:     var(--color-night-mid);
  --glow:          var(--color-glow);
  --wisteria:      var(--color-wisteria);
  --thistle:       var(--color-thistle);
  --magnolia:      var(--color-magnolia);
  --mist:          var(--color-mist);
  --line:          var(--color-line);
  --border-colour: var(--color-border);
  --body:          var(--color-body);
  --fineprint:     var(--color-muted);   /* disabled and fine print only */
  --vanilla:       var(--color-vanilla);
  --uranian:       var(--color-uranian);
  --mauve:         var(--color-mauve);
  --indigo:        var(--color-indigo);

  /* The engine's derived colours, pointed at the brand */
  --muted:    var(--body);
  --hairline: var(--line);
  --surface:  var(--mist);

  /* Gradients */
  --sunburst: radial-gradient(ellipse 70% 85% at 50% 115%, var(--glow) 0%, var(--grape) 22%, var(--night-mid) 46%, var(--night) 78%);
  --sunburst-top: radial-gradient(ellipse 80% 70% at 50% -20%, var(--night-mid) 0%, var(--night) 70%);

  /* Radius */
  --r-pill:  999px;
  --r-xl:    28px;
  --r-lg:    24px;
  --r-md:    20px;
  --r-sm:    14px;
  --r-input: 10px;
  --r-hero:  clamp(48px, 9vw, 160px);
  --radius:    var(--r-input);   /* engine: inputs and small parts */
  --radius-lg: var(--r-md);      /* engine: cards and bands */

  /* Layout: 1280px content width is set in Site chrome */
  --gutter: 24px;
  --section-pad:       96px;
  --section-pad-tight: 72px;
  --section-pad-close: 120px;
  --grid-card: 270px;
  --grid-pair: 440px;

  /* Shadow */
  --shadow-media: 0 1px 2px rgba(6, 7, 14, .16), 0 14px 30px rgba(6, 7, 14, .14);
  --shadow-hero:  0 30px 60px rgba(6, 7, 14, .35);

  /* Type */
  --caps-tracking: .08em;
  --display-size: clamp(2.25rem, 1rem + 3.4vw, 4rem);   /* brief: clamp(36px, 4.6vw, 64px) */
  --focus-ring: 3px solid var(--mauve);
}

/* ---- Type ----------------------------------------------------------------- */
.block-eyebrow {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: var(--caps-tracking);
  color: var(--grape-dark);
}

/* Display heading: put "display" in a block's CSS class field */
.display .block-heading {
  font-size: var(--display-size);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-inline-size: 18ch;
}

a { color: var(--grape-dark); }
a:hover { color: var(--ink); }

/* ---- Buttons -------------------------------------------------------------- */
/* Every button is a pill. Engine buttons are the cta--* links, the header
   actions, and the form's submit; all of them take the same shape. */
.cta--primary, .cta--secondary,
.site-header-cta,
.cms-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-block-size: 44px;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* Primary: the main action in any section */
.cta--primary,
.site-header-cta--primary,
.cms-form button[type="submit"] {
  background: var(--grape);
  color: #fff;
}
.cta--primary:hover,
.site-header-cta--primary:hover,
.cms-form button[type="submit"]:hover {
  background: var(--grape-dark);
  color: #fff;
}

/* Secondary: supporting actions */
.cta--secondary,
.site-header-cta--secondary {
  background: transparent;
  border-color: var(--grape);
  color: var(--grape-deep);
}
.cta--secondary:hover,
.site-header-cta--secondary:hover {
  background: var(--magnolia);
  border-color: var(--grape);
  color: var(--grape-deep);
}

/* On dark: any primary inside a block or section with the class "on-dark",
   and the header's actions wherever the header sits on the hero. */
.on-dark .cta--primary,
.on-dark .site-header-cta--primary {
  background: #fff;
  color: var(--grape-deep);
}
.on-dark .cta--primary:hover,
.on-dark .site-header-cta--primary:hover {
  background: var(--thistle);
  color: var(--grape-deep);
}
.on-dark .cta--secondary,
.on-dark .site-header-cta--secondary {
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}
.on-dark .cta--secondary:hover,
.on-dark .site-header-cta--secondary:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}

/* Quiet: low-priority actions, such as the form's "Attach a file" */
.cms-form input[type="file"]::file-selector-button {
  min-block-size: 44px;
  margin-inline-end: 12px;
  padding: 10px 20px;
  border: 1px solid var(--border-colour);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font: 600 .9375rem/1.2 var(--font-body);
  cursor: pointer;
  transition: background-color var(--transition);
}
.cms-form input[type="file"]::file-selector-button:hover { background: var(--mist); }

/* Text link: "Shop all products", "Read them on Google" */
.cta--tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 0;
  border-radius: 0;
  color: var(--grape-dark);
  font-weight: 600;
  text-decoration: none;
}
.cta--tertiary:hover { color: var(--ink); }
.on-dark .cta--tertiary { color: #fff; }
.on-dark .cta--tertiary:hover { color: var(--thistle); }

/* The arrow: always on text links, and on every button in a block or
   section with the class "has-arrows". Drawn with a mask, so it takes the
   text colour and is hidden from screen readers. */
.cta--tertiary::after,
.has-arrows :is(.cta--primary, .cta--secondary)::after {
  content: "";
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition);
}
.cta--tertiary:hover::after,
.has-arrows :is(.cta--primary, .cta--secondary):hover::after { transform: translateX(3px); }

/* Focus: one ring for every button and link */
:focus-visible,
.cta--primary:focus-visible, .cta--secondary:focus-visible, .cta--tertiary:focus-visible,
.site-header-cta:focus-visible,
.cms-form button:focus-visible,
.cms-form input[type="file"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Disabled: a flat colour, never reduced opacity */
.cms-form button:disabled,
[aria-disabled="true"]:is(.cta--primary, .cta--secondary, .site-header-cta) {
  background: var(--mist);
  border-color: var(--mist);
  color: var(--fineprint);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Inputs --------------------------------------------------------------- */
.cms-form input:not([type="checkbox"], [type="radio"], [type="file"]),
.cms-form textarea,
.cms-form select {
  min-block-size: 44px;
  /* Not --border-colour: an input's edge needs 3:1 against white and the
     brand border is 1.7:1. Grape Deep at 55% is 3.5:1. */
  border: 1px solid color-mix(in srgb, var(--grape-deep) 55%, #fff);
  border-radius: var(--r-input);
  background: #fff;
  font-family: var(--font-body);
}
.cms-form input:focus, .cms-form textarea:focus, .cms-form select:focus { border-color: var(--grape); }

@media (prefers-reduced-motion: reduce) {
  .cta--tertiary::after,
  .has-arrows :is(.cta--primary, .cta--secondary)::after { transition: none; }
}

/* ---- Dark surfaces -------------------------------------------------------- */
/* "on-dark" on a section, block, or the header (Site chrome header class)
   turns text light; the buttons above already respond to it. */
.on-dark { color: #fff; }
.on-dark :is(h1, h2, h3, h4, .block-heading, .card-title) { color: #fff; }
.on-dark :is(.block-body, .card-body) { color: var(--thistle); }
.on-dark .block-eyebrow { color: var(--mauve); }
.on-dark a:not([class*="cta"]) { color: #fff; }
.on-dark a:not([class*="cta"]):hover { color: var(--thistle); }

/* ---- Header --------------------------------------------------------------- */
/* Night on every page, so it joins the hero's dark top without a seam. The
   header is a contained box, so the colour is carried to the viewport edges
   by a spread shadow and clipped to the header's height. */
.site-header {
  background: var(--night);
  box-shadow: 0 0 0 100vmax var(--night);
  clip-path: inset(0 -100vmax);
  position: relative;
  z-index: 10;
}
.site-header--blocks { gap: var(--space-l); padding-block: 12px; }
.site-header .logo-block img { block-size: 2.25rem; }
.site-header .menu-block a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: #fff;
  font-weight: 500;
  font-size: .9375rem;
}
.site-header .menu-block a:hover { color: var(--thistle); }
.site-header .menu-toggle { inline-size: 44px; block-size: 44px; padding: 10px; }
.site-header .menu-toggle span { background: #fff; }
.site-header .block--buttons { margin-inline-start: auto; }
.site-header .buttons-block { gap: 10px; }
.site-header .buttons-block :is(.cta--primary, .cta--secondary) { padding: 10px 20px; font-size: .9375rem; }
@media (max-width: 800px) {
  .site-header .block--menu { order: 3; flex-basis: 100%; }
  .site-header .menu-block--inline > .menu-list { padding-block: 8px 16px; }
}

/* ---- Hero ----------------------------------------------------------------- */
.qp-hero {
  background-color: var(--night);
  background-image: var(--sunburst);
  border-end-start-radius: var(--r-hero);
  border-end-end-radius: var(--r-hero);
  padding-block-end: clamp(48px, 7vw, 112px);
  overflow: hidden;
}

/* Notice pill */
.notice-pill.block { padding-block: 24px 0; }
.notice-pill .block-body { margin-block-start: 0; }
.notice-pill p { margin: 0; }
.notice-pill a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
}
.notice-pill a::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--vanilla);
}
.notice-pill a:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* Copy on the left, a 4:3 image on the right; stacks on a phone. */
.qp-hero .block--hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 80px) 0;
}
.qp-hero .block--hero > * { inline-size: auto; margin-inline: 0; }
.qp-hero .hero-inner { display: block; }
.qp-hero .block-heading { max-inline-size: 14ch; }
.qp-hero .block-body { max-inline-size: 34rem; margin-block-start: 20px; font-size: 1.125rem; }
.qp-hero .hero-actions { margin-block-start: 32px; gap: 12px; }
.qp-hero .hero-media img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hero);
  background: var(--thistle);
}

/* ---- Cards (shared by reviews, products, services, industries) ----------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  padding: 28px;
  gap: 10px;
}
.card-title { font-size: var(--h4-size); font-weight: 600; letter-spacing: -0.01em; }
.card-body { font-size: 1rem; line-height: 1.55; }
.card-media { margin: -28px -28px 4px; }
.card-media img { border-radius: var(--r-md) var(--r-md) 0 0; }
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  color: var(--grape-dark);
  font-weight: 600;
  text-decoration: none;
}
.card-cta::after {
  content: "";
  inline-size: 1em;
  block-size: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition);
}
.card-cta:hover { color: var(--ink); }
.card-cta:hover::after { transform: translateX(3px); }

/* ---- Google reviews ------------------------------------------------------- */
.qp-reviews.block { padding-block: var(--section-pad) var(--section-pad-tight); }
.qp-reviews .review {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}
.qp-reviews .review-stars { color: var(--grape); }
.qp-reviews .review-initial { background: var(--magnolia); color: var(--grape-deep); }
.qp-reviews .reviews--grid .reviews-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-card)), 1fr)); }

/* ---- Popular products: one row that scrolls sideways ---------------------- */
.qp-products .grid > * { flex-basis: clamp(220px, 22%, 280px); }

/* ---- Services ------------------------------------------------------------- */
.qp-services.block { padding-block: var(--section-pad-tight) var(--section-pad); }
.qp-services .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-card)), 1fr)); }
.qp-services .card { background: var(--mist); border-color: var(--line); }

/* ---- Our Peeps ------------------------------------------------------------ */
.qp-peeps {
  background-color: var(--night);
  background-image: var(--sunburst-top);
  padding-block: var(--section-pad);
}
.qp-peeps .block { padding-block: 0; }
.qp-peeps .block-body { max-inline-size: 40rem; }
.qp-peeps .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.qp-peeps .card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
}
/* The swatch: the social palette in turn, decorative. */
.qp-peeps .card::before {
  content: "";
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: 6px;
  border-radius: var(--r-sm);
  background: var(--vanilla);
}
.qp-peeps .card:nth-child(4n + 2)::before { background: var(--uranian); }
.qp-peeps .card:nth-child(4n + 3)::before { background: var(--mauve); }
.qp-peeps .card:nth-child(4n + 4)::before { background: var(--indigo); }
.qp-peeps .card-body { font-size: .9375rem; }
.qp-peeps .card-cta { color: #fff; }
.qp-peeps .card-cta:hover { color: var(--thistle); }

/* ---- Custom quote panel --------------------------------------------------- */
.qp-quote.block {
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  margin: var(--section-pad) auto 0;
  padding: clamp(28px, 5vw, 64px);
  border-radius: var(--r-xl);
  background: var(--magnolia);
}
.qp-quote.block > * { inline-size: auto; max-inline-size: none; margin-inline: 0; }
.qp-quote .block-body { color: var(--body); }
.qp-quote .block-body a { font-weight: 600; }
.qp-quote .cms-form { max-inline-size: none; margin-block-start: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.qp-quote .cms-form :is(.field--what_you_need, .field--name, .field--email, button) { grid-column: 1 / -1; }
.qp-quote .cms-form .field > span { color: var(--ink); font-weight: 500; font-size: .9375rem; }
@media (min-width: 900px) {
  .qp-quote.block { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; column-gap: clamp(40px, 5vw, 72px); }
  .qp-quote .block-heading { grid-column: 1; grid-row: 1; }
  .qp-quote .block-body { grid-column: 1; grid-row: 2; }
  .qp-quote :is(.cms-form, .form-success, .form-error) { grid-column: 2; grid-row: 1 / span 2; }
  .qp-quote .cms-form .field--name { grid-column: auto; }
  .qp-quote .cms-form .field--email { grid-column: auto; }
}

/* ---- Closing heading and feature rows ------------------------------------ */
.qp-features.block { padding-block: var(--section-pad-close) var(--section-pad); }
.qp-features .block-body { font-size: 1.25rem; color: var(--body); }
.qp-features .grid { grid-template-columns: 1fr; gap: clamp(48px, 7vw, 96px); margin-block-start: clamp(48px, 6vw, 80px); }
.qp-features .card {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
}
/* The visual: an image when one is set, a tinted panel until then. Tints run
   vanilla, uranian, mauve, each fading to white. */
.qp-features .card { --tint: var(--vanilla); }
.qp-features .card:nth-child(3n + 2) { --tint: var(--uranian); }
.qp-features .card:nth-child(3n + 3) { --tint: var(--mauve); }
.qp-features .card-media,
.qp-features .card:not(:has(.card-media))::before {
  margin: 0 0 12px;
  padding: clamp(20px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--tint), #fff 85%);
}
.qp-features .card:not(:has(.card-media))::before { content: ""; aspect-ratio: 4 / 3; }
.qp-features .card-media img { aspect-ratio: 4 / 3; border-radius: var(--r-md); box-shadow: var(--shadow-media); }
.qp-features .card-title { font-size: var(--h3-size); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.qp-features .card-body { font-size: 1.125rem; color: var(--body); max-inline-size: 32rem; }
.qp-features .card-cta { justify-self: start; margin-block-start: 12px; }
@media (min-width: 900px) {
  .qp-features .card {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(40px, 6vw, 96px);
  }
  .qp-features .card-media,
  .qp-features .card:not(:has(.card-media))::before { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .qp-features .card > :not(.card-media) { grid-column: 2; }
  .qp-features .card-title { grid-row: 2; }
  .qp-features .card-body { grid-row: 3; }
  .qp-features .card-cta { grid-row: 4; }
  /* Alternate: the visual moves right on every second row. */
  .qp-features .card:nth-child(even) .card-media,
  .qp-features .card:nth-child(even):not(:has(.card-media))::before { grid-column: 2; }
  .qp-features .card:nth-child(even) > :not(.card-media) { grid-column: 1; }
}

/* ---- Footer --------------------------------------------------------------- */
.site-footer {
  margin-block-start: 0;
  border: 0;
  background: var(--night);
  color: var(--thistle);
}
.footer-blocks { border: 0; padding-block: 56px 32px; }
.site-footer .logo-block img { block-size: 2.25rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--thistle); }
.site-footer .menu-block a { display: inline-flex; align-items: center; min-block-size: 44px; color: #fff; }
.site-footer .menu-block-heading { color: var(--mauve); font-size: .875rem; font-weight: 600; }
.site-footer .footer-contact .block-body { margin-block-start: 0; font-size: 1rem; }
.lower-footer { border-block-start: 1px solid rgba(255, 255, 255, .12); color: var(--thistle); }