/* ==========================================================
   MACE SOFTWARE SOLUTIONS
   ----------------------------------------------------------
   One typeface, one accent, one radius scale. Sections are
   separated by space, not boxes and rules. Light and dark
   both ship. Nothing here is wired into the live site.
   ========================================================== */

:root {
  --paper:       #FAFAF9;
  --surface:     #FFFFFF;
  --ink:         #1A1A18;
  --muted:       #5A594F;
  --line:        rgba(26, 26, 24, 0.11);
  --accent:      #1B6B4C;
  --accent-ink:  #14543C;
  --accent-soft: #E9F2ED;
  --on-accent:   #FFFFFF;

  --font:         "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cabinet Grotesk", "Switzer", system-ui, sans-serif;

  --r:    12px;
  --r-sm: 8px;
  /* Matches the corner radius already baked into the supplied
     client logo tiles, so ours line up with theirs. */
  --r-logo: 17px;

  --gutter: 20px;
  --maxw:   1120px;
}

@media (min-width: 900px) { :root { --gutter: 40px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #121311;
    --surface:     #1A1B18;
    --ink:         #F2F1EC;
    --muted:       #A5A399;
    --line:        rgba(242, 241, 236, 0.13);
    --accent:      #4FB286;
    --accent-ink:  #6CC79C;
    --accent-soft: rgba(79, 178, 134, 0.12);
    --on-accent:   #0F100E;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
p { margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

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

/* ---------- The ring mark ---------- */
.ring-a, .ring-b { transform-box: fill-box; transform-origin: center; }
.ring-a { animation: ring-a 8s ease-in-out infinite; }
.ring-b { animation: ring-b 11s ease-in-out infinite; animation-delay: -3.5s; }
@keyframes ring-a { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.6); } }
@keyframes ring-b { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.8); } }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(12px); }
[data-reveal].is-in { animation: reveal 0.55s cubic-bezier(.16,1,.3,1) forwards; }
[data-reveal].reveal-done { animation: none; opacity: 1; transform: none; }
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.btn-lg { padding: 13px 24px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn:active { transform: translateY(1px); }

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

/* var(--line) is tuned for hairline dividers and reads as almost
   nothing on a button, so derive the border from the text colour
   instead. Works in both themes without a second token. */
.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in srgb, currentColor 28%, transparent);
}
.btn-quiet:hover { border-color: var(--ink); }
.btn i { font-size: 1.2em; line-height: 1; }

.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.quiet-link i { font-size: 18px; color: var(--accent); }
a.quiet-link:hover { color: var(--ink); }

/* ==========================================================
   Header
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* The mark steps up to 58px here and needs the extra room to sit in.
   Held at 80px, the practical ceiling before a header starts eating
   real estate the hero should own. */
@media (min-width: 620px) { .header-inner { height: 80px; } }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  min-width: 0;
}
/* Stepped rather than one fixed size below 620px: the wordmark is
   the widest thing in the header, and growing it further than this
   at each width starts overlapping the button (verified against
   real rendered text width, not just the container box, which can
   shrink narrower than its own overflowing content). */
@media (min-width: 365px) { .brand { font-size: 16px; gap: 9px; } }
@media (min-width: 414px) { .brand { font-size: 17.5px; gap: 10px; } }
@media (min-width: 620px) { .brand { font-size: 22px; gap: 14px; } }
.brand span { white-space: nowrap; }
.brand-mark { width: 34px; height: 34px; flex: none; color: var(--ink); }
@media (min-width: 365px) { .brand-mark { width: 38px; height: 38px; } }
@media (min-width: 414px) { .brand-mark { width: 44px; height: 44px; } }
@media (min-width: 620px) { .brand-mark { width: 58px; height: 58px; } }

/* A touch more compact on phones only, to leave the growing wordmark
   room to breathe. Untouched everywhere else (hero, contact, footer
   all use .btn-lg, a different class). */
.header-inner .btn { padding: 9px 15px; font-size: 13.5px; }
@media (min-width: 480px) { .header-inner .btn { padding: 10px 18px; font-size: 14.5px; } }
/* The mark is drawn in a 240-unit viewBox, so at header size its
   stroke-width of 2 renders at about a quarter of a pixel and the
   back arcs at 0.2 opacity vanish entirely. The <use> shadow tree
   can't be reached with descendant selectors, but custom properties
   inherit into it, so scale the strokes up and lift the faded arcs
   here. The hero mark is 10x larger and keeps the defaults. */
.brand-mark {
  --ring-w: 9;
  --ring-w-thin: 7;
  --ring-w-planet: 9;
  --ring-a-back: 0.7;
  --ring-b-back: 0.55;
  --ring-a-front: 1;
  --ring-b-front: 0.85;
}

/* ==========================================================
   Hero
   ========================================================== */
.hero { padding-top: 48px; padding-bottom: 56px; }
@media (min-width: 900px) { .hero { padding-top: 76px; padding-bottom: 96px; } }

.hero-inner { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.4fr 0.6fr; gap: 48px; }
}

.hero-copy h1 {
  font-size: clamp(32px, 5vw, 47px);
  max-width: 23ch;
  letter-spacing: -0.022em;
}
.lede {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(16.5px, 2vw, 19px);
  color: var(--muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}
/* Trimmed down on phones so both buttons sit on one row instead of
   turning into two full-width slabs. Full size from tablet up. */
@media (max-width: 479px) {
  .hero-actions .btn-lg { padding: 11px 16px; font-size: 14.5px; }
}

/* On phones the mark lives in the header only, so the hero stays
   short enough to read without scrolling. */
.hero-mark { display: none; }
@media (min-width: 900px) {
  .hero-mark { display: flex; justify-content: flex-end; color: var(--ink); }
  .hero-mark svg {
    width: 290px;
    height: 290px;
    /* The rings keep breathing on their own cycle inside the mark.
       Turning the whole thing on top gives it the slow tumble of a
       planet, and the front/back arc clipping rides along with it. */
    animation: orbit 28s linear infinite;
    will-change: transform;
  }
}
@keyframes orbit { to { transform: rotate(360deg); } }

/* ==========================================================
   Sections
   ========================================================== */
.section { padding-top: 58px; padding-bottom: 58px; scroll-margin-top: 80px; }
/* Clears the taller sticky header so anchor jumps don't tuck a
   heading underneath it. */
@media (min-width: 620px) { .section { scroll-margin-top: 94px; } }
@media (min-width: 900px) { .section { padding-top: 92px; padding-bottom: 92px; } }

.section-title { font-size: clamp(23px, 3.2vw, 31px); margin-bottom: 34px; }

/* ---------- What we build ---------- */
.build-grid { display: grid; gap: 14px; }
@media (min-width: 620px) { .build-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }

.build-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 22px;
}
.build-item i { font-size: 26px; color: var(--accent); }
.build-item h3 { margin: 14px 0 8px; font-size: 18px; font-weight: 700; }
.build-item p { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- How it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 900px) { .steps { gap: 34px; max-width: 74ch; } }
.steps li { padding-left: 22px; border-left: 2px solid var(--accent-soft); }
.steps h3 { font-size: 19px; font-weight: 700; margin-bottom: 7px; }
.steps p { color: var(--muted); font-size: 15.5px; }

/* ---------- Work ----------
   Every client logo arrives in a different shape: some are artwork
   on transparent, some already carry their own app-style tile. So
   each one gets an identical tile and the brand colour goes behind
   it. The geometry stays consistent, the colour stays theirs. */
.work-grid { display: grid; gap: 14px; }
@media (min-width: 720px) { .work-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }

.work-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.work-item:hover { border-color: var(--accent); transform: translateY(-2px); }
@media (min-width: 720px) { .work-item { gap: 18px; padding: 20px; } }

.work-logo {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: var(--r-logo);
  overflow: hidden;
  display: grid;
  place-items: center;
}
@media (min-width: 720px) { .work-logo { width: 80px; height: 80px; } }
.work-logo img { width: 100%; height: 100%; object-fit: cover; }

/* Navy artwork on transparent, so it needs a light tile and inset. */
.work-logo--paper { background: #F2F2EF; padding: 11px; }
.work-logo--paper img { object-fit: contain; }
/* These three carry their own tile. The background matches the
   artwork so any difference in baked corner radius disappears. */
.work-logo--rinse    { background: #0EA5E9; }
.work-logo--sitewise { background: #233154; }
.work-logo--survey   { background: #0F1017; }
/* This one is drawn with a wide margin inside its own square, so it
   reads smaller than the rest. Crop in to match their optical size. */
.work-logo--survey img { transform: scale(1.22); }

.work-text { min-width: 0; }
.work-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.work-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.work-state { font-size: 13px; color: var(--muted); }
.work-desc { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; gap: 14px; }
@media (min-width: 860px) { .price-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.price {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 22px;
}
.price-pick { border-color: var(--accent); background: var(--accent-soft); }
.price h3 { font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-figure {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.price p:last-child { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.price-note { margin-top: 20px; color: var(--muted); font-size: 14.5px; }

/* ---------- Contact ---------- */
.contact-inner { display: grid; gap: 38px; }
@media (min-width: 900px) { .contact-inner { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }

.contact-copy p { color: var(--muted); max-width: 44ch; }
.contact-copy .section-title { margin-bottom: 16px; }
.contact-direct { display: flex; flex-direction: column; gap: 13px; margin-top: 28px; }
.quiet-link--static { cursor: default; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-note { margin-top: 13px; font-size: 14.5px; }
.form-note[data-state="ok"]  { color: var(--accent-ink); }
.form-note[data-state="err"] { color: #C0392B; }
@media (prefers-color-scheme: dark) { .form-note[data-state="err"] { color: #F09083; } }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer { border-top: 1px solid var(--line); padding-top: 26px; padding-bottom: 34px; }
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 620px) {
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.brand--footer { font-size: 14.5px; }
.brand--footer .brand-mark { width: 22px; height: 22px; }
.footer-meta { font-size: 14px; color: var(--muted); }