/* ==========================================================================
   Mold Solutions — main stylesheet
   Colours and type come from the 2021 Pantone source; see
   ai/context/design-system.md. Do not introduce colour values outside the
   custom properties below.
   ========================================================================== */

:root {
  /* Brand — PANTONE 426 C / 166 C / Warm Gray 8 C */
  --ink:          #252729;
  --accent:       #ee7501;
  --warm-gray:    #aaa095;

  /* Derived neutrals, all warm-tinted to match Warm Gray 8 C */
  --ink-soft:     #4a4d50;
  --line:         #dedad5;
  --surface:      #ffffff;
  --surface-alt:  #f6f4f2;

  /* Accent, darkened to reach 4.5:1 on white for link text.
     Raw --accent is 3.0:1 and fails AA at body size. */
  --accent-text:  #b35700;

  --measure:      68ch;
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --stack:        clamp(3.5rem, 8vw, 6rem);

  --font-sans:    "Helvetica Condensed", "Arial Narrow",
                  "Helvetica Neue Condensed", "Helvetica Neue",
                  Arial, sans-serif;
}

/* --- reset ---------------------------------------------------------------- */

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

body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }

ul[class], ol[class] { list-style: none; }

img { max-width: 100%; height: auto; display: block; }

/* --- base ----------------------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }

p, li { text-wrap: pretty; }

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --- layout --------------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), 72rem);
  margin-inline: auto;
}

.wrap--narrow { width: min(100% - (var(--gutter) * 2), 48rem); }

.section { padding-block: var(--stack); }

.section--alt {
  background: var(--surface-alt);
  border-block: 1px solid var(--line);
}

.flow > * + * { margin-top: 1rem; }
.flow > * + h2 { margin-top: 2.5rem; }
.flow > * + h3 { margin-top: 2rem; }

.prose { max-width: var(--measure); }

/* --- skip link ------------------------------------------------------------ */

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  z-index: 60;
  transform: translateY(-120%);
}

.skip-link:focus { transform: translateY(0); }

/* --- header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);

  /* Near-opaque so content stays readable as it scrolls underneath, with a
     blur where supported. The solid colour below is the fallback: without it
     an unsupported browser would render the bar fully transparent. */
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Anchor targets must clear the fixed bar rather than hide behind it. */
:target { scroll-margin-top: 6rem; }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.25rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.site-logo img { width: clamp(9rem, 20vw, 12rem); }

.site-logo__text { display: flex; flex-direction: column; }
.site-logo__name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.site-logo__tag {
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  list-style: none;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { border-bottom-color: var(--warm-gray); }

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
  font-weight: 700;
}

/* Language switch — a plain link, works without JS */
.lang-switch {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  white-space: nowrap;
}

.lang-switch:hover {
  border-color: var(--warm-gray);
  color: var(--ink);
}

/* --- hero ----------------------------------------------------------------- */

.hero { padding-block: var(--stack); }

.hero__title { max-width: 20ch; }

.hero__lead {
  max-width: 52ch;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  color: var(--ink-soft);
  margin-top: 1.25rem;
}

.hero__rule {
  width: 4.5rem;
  height: 4px;
  background: var(--accent);
  border: 0;
  margin: 2rem 0 0;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: 2px;
}

.btn:hover { background: transparent; color: var(--ink); }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.btn--accent:hover { background: transparent; color: var(--ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}

/* --- cards / grid --------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-alt);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Per-image framing. The 3:2 card crops from the centre by default, which
   can cut off the part of the image that carries the meaning. */
.card__media img.pos-left   { object-position: left center; }
.card__media img.pos-right  { object-position: right center; }

/* Between centre and hard right: shifts the image left just enough to bring
   the monitor edge inside the frame without pushing the part out of view. */
.card__media img.pos-right-soft { object-position: 66% center; }
.card__media img.pos-left-soft  { object-position: 35% center; }

/* A UI screenshot has no "unimportant" edge to crop, so stretch it to the
   card's ratio instead. Slight distortion is preferable to losing a menu. */
.card__media img.fit-fill { object-fit: fill; }

.card__body { padding: 1.25rem 1.35rem 1.5rem; }

.card__title { font-size: 1.15rem; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--accent-text); }

.card__meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

.card__text { margin-top: 0.75rem; color: var(--ink-soft); }

/* --- feature list --------------------------------------------------------- */

.features { display: grid; gap: 1.75rem; }

.feature__title { font-size: 1.1rem; }

.feature__title::before {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  background: var(--accent);
  margin-bottom: 0.6rem;
}

.feature p { color: var(--ink-soft); margin-top: 0.4rem; }

/* Plain bulleted list with brand markers */
.ticks { list-style: none; display: grid; gap: 0.6rem; }

.ticks li { padding-left: 1.5rem; position: relative; }

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}

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

.steps { counter-reset: step; display: grid; gap: 2rem; }

.step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; }

.step::before {
  counter-increment: step;
  content: counter(step);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  border-top: 3px solid var(--accent);
  padding-top: 0.5rem;
  min-width: 2rem;
}

/* --- definition-style spec table ------------------------------------------ */

.specs {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.specs th, .specs td {
  text-align: left;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.specs th { width: 12rem; font-weight: 700; }
.specs td { color: var(--ink-soft); }

.table-scroll { overflow-x: auto; }

/* --- footer ---------------------------------------------------------------
   Light band closing the page, in the same tone as the alternating sections.
   Three columns: contact on the left, the button centred between them,
   navigation on the right. Text is deliberately quiet — #5c5f61 reaches
   5.9:1 here, well past AA, while headings and hovers go full ink. */

.site-footer {
  position: relative;
  margin-top: calc(var(--stack) + 2.5rem);
  padding-block: 5rem 2.5rem;
  background: var(--surface-alt);
  color: #5c5f61;
  border-top: 1px solid var(--line);
}

.site-footer__mark {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.5rem;
  /* White ring on the light band: without it the disc would sit flat
     against a tone too close to its own surround. The SVG punches its
     mould lines out, so this colour shows through them as well.

     The rule below carries the footer's top border around the lower half
     of the circle, so the line follows the edge of the light band instead
     of stopping dead either side. The upper half sits against white and
     needs no line. */
  background: var(--surface);
  border-radius: 50%;
}

/* Lower half only: the arc that borders the light band. */
.site-footer__mark::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--line);
  border-radius: 50%;
  /* Hide the top half of the ring: it sits against white, where the line
     would have nothing to separate. */
  clip-path: inset(50% 0 0 0);
  pointer-events: none;
}

.site-footer__mark img { width: 100%; height: auto; display: block; }

.site-footer a {
  color: #5c5f61;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer h2 {
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 1.1rem;
  letter-spacing: 0.01em;
}

.site-footer address { font-style: normal; line-height: 1.9; }

/* Contact | buttons | navigation. The centre column takes the slack, so the
   two text columns are pushed towards the outer edges and the buttons stay
   on the centre line. */
.footer-columns {
  display: grid;
  /* A fixed centre column with equal columns either side: the buttons sit on
     the page's centre line — directly under the emblem — whatever the width
     of the contact and navigation blocks. */
  grid-template-columns: 1fr 12.5rem 1fr;
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
}

.footer-columns ul { list-style: none; display: grid; gap: 0.65rem; }

.footer-col--contact { justify-self: start; text-align: left; }
.footer-col--nav     { justify-self: end;   text-align: right; }

.footer-col--actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  /* Holds the CALC PRO button on the line it sat on when a second button
     stood above it: 0.35rem of the original padding plus that button's
     height and the gap it left behind. */
  padding-top: 4.6rem;
}

.footer-col--actions .btn { text-align: center; }

/* Stack on narrow screens: contact, navigation, then the buttons. */
@media (max-width: 46rem) {
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }
  .footer-col--actions {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.5rem;
  }
}

@media (max-width: 30rem) {
  .footer-columns { grid-template-columns: 1fr; text-align: center; }
  .footer-col--contact,
  .footer-col--nav { justify-self: center; text-align: center; }
}

/* On the light band the outline button takes an ink border and fills on
   hover, matching the buttons elsewhere on the page. */
.site-footer .btn {
  background: transparent;
  border-color: #b8b3ad;
  color: var(--ink);
}

.site-footer .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  text-decoration: none;
}

.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

@media (max-width: 34rem) {
  .footer-bottom { justify-content: center; text-align: center; }
}

/* --- utilities ------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lead { font-size: 1.15rem; color: var(--ink-soft); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

/* --- figures --------------------------------------------------------------
   Small images (product shots on a white ground) would otherwise sit
   left-aligned next to a full-width photo, which reads as a mistake.
   Centre them and cap the width so they stay a deliberate size. */

figure { margin: 0; }

figure img { margin-inline: auto; }

.figure--inset img { max-width: min(100%, 30rem); }

/* Keep the caption with its image rather than spanning the full column */
.figure--inset figcaption {
  max-width: min(100%, 30rem);
  margin-inline: auto;
}