/* Vividworks LLC - "Clay SaaS / Soft UI" theme PREVIEW.
   Adapted from claysaascode.txt (MIT): one flat page colour, raised and pressed surfaces in the SAME
   colour lit by a single top-left light, violet accent, Funnel Display + JetBrains Mono. */

@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/funnel-display-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-var.woff2") format("woff2");
}

:root {
  --greyLight-1: #e4ebf5;   /* the one page colour */
  --greyLight-2: #c8d0e7;
  --white: #ffffff;

  --primary-light: #8abdff;
  --primary: #6d5dfc;
  --primary-dark: #5b0eeb;

  --text-dark: #2c3557;
  --body: #46507a;
  --muted: #5f6e99;

  --shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  --shadow-inset: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  --shadow-lg: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);
  --shadow-primary:
    inset 0.2rem 0.2rem 1rem var(--primary-light),
    inset -0.2rem -0.2rem 1rem var(--primary-dark),
    0.3rem 0.3rem 0.6rem var(--greyLight-2),
    -0.2rem -0.2rem 0.5rem var(--white);

  --display: "Funnel Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--greyLight-1);
  color: var(--text-dark);
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: var(--primary-dark); text-decoration: none; }
a:hover { color: var(--primary); text-decoration: underline; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 10px; }

.wrap { width: min(1100px, 100% - 36px); margin: 0 auto; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--primary); color: #fff; padding: .5rem 1rem; border-radius: 12px; font-weight: 600;
}
.skip:focus { top: 1rem; color: #fff; text-decoration: none; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 70; background: var(--greyLight-1); }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 16px 0 12px; }
.brand { display: block; line-height: 0; }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 60px; width: auto; mix-blend-mode: multiply; }

.bar nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bar nav a {
  display: block; padding: 8px 16px; border-radius: 999px;
  font-size: .85rem; font-weight: 500; color: var(--body); background: #c2c8d0;
  box-shadow: var(--shadow); transition: box-shadow .3s var(--ease), color .3s var(--ease);
}
.bar nav a:hover { color: var(--primary-dark); text-decoration: none; box-shadow: var(--shadow-inset); }
.bar nav a[aria-current="page"] { color: var(--primary-dark); box-shadow: var(--shadow-inset); font-weight: 600; }

.callbar { padding: 6px 0 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.callbar p { margin: 0; }
.callbar a { color: var(--primary-dark); font-weight: 600; white-space: nowrap; }

/* ---------- the raised page ---------- */
.plate {
  border-radius: 32px;
  background: var(--greyLight-1);
  box-shadow: var(--shadow-lg);
}
.screws { display: none; }
.page { margin-top: 18px; margin-bottom: 48px; padding: clamp(28px, 4.4vw, 56px) clamp(22px, 4.6vw, 60px) clamp(32px, 4vw, 52px); }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: var(--text-dark); margin: 0; }
h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.2rem; }
h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 2.2rem 0 .8rem; }
h1 em { font-style: normal; color: var(--primary); }
p, li { color: var(--body); }
p { margin: 0 0 1rem; max-width: 72ch; }

.stencil, .date, .crumb {
  font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.stencil { margin: 0 0 1rem; }
.date { margin: -.4rem 0 1.2rem; }
.more { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }

/* ---------- buttons: violet, lit from inside ---------- */
.btn {
  display: inline-block; padding: 14px 30px; border: 0; border-radius: 24px;
  background: var(--primary); color: #fff; cursor: pointer;
  font-family: var(--display); font-size: .98rem; font-weight: 500;
  box-shadow: var(--shadow-primary);
  transition: box-shadow .4s, background-color .4s;
}
.btn:hover { color: #fff; text-decoration: none; background: var(--primary-dark); }
.btn:active { box-shadow: inset 0.2rem 0.2rem 0.6rem rgba(0, 0, 0, .35), inset -0.2rem -0.2rem 0.6rem rgba(255, 255, 255, .15); }

/* ---------- pressed surfaces ---------- */
.well, .tiles li, .card, .map iframe, .partner, .map-ph {
  border-radius: 24px;
  background: var(--greyLight-1);
  box-shadow: var(--shadow-inset);
}

/* ---------- home ---------- */
.hero img {
  display: block; width: 100%; height: auto; border-radius: 28px; margin: 0 0 1.8rem;
  box-shadow: var(--shadow);
}
.hero h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1; letter-spacing: -.045em; margin: .4rem 0 1.6rem; max-width: 16ch; }
.hero h1 em { display: block; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 3rem; margin-top: 2.6rem; }

.tiles { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; counter-reset: t; }
.tiles li { counter-increment: t; padding: 20px 22px; color: var(--text-dark); font-weight: 600; font-size: 1rem; }
.tiles li::before {
  content: counter(t, decimal-leading-zero); display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: .65rem; font-weight: 500; letter-spacing: .2em; color: var(--primary);
}

.checks { list-style: none; padding: 0; margin: 0 0 1rem; }
.checks li { padding: .7rem 1rem .7rem 2.6rem; position: relative; margin-bottom: 12px; border-radius: 18px; box-shadow: var(--shadow-inset); }
.checks li::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: var(--primary); box-shadow: var(--shadow-primary);
}
img.wide { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: 28px; margin: 0 0 1.8rem; box-shadow: var(--shadow); }

/* ---------- cards (services, benefits) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; counter-reset: c; }
.card { padding: 26px 28px 24px; counter-increment: c; }
.card h2 { margin: 0 0 .9rem; font-size: 1.15rem; }
.card h2::before {
  content: counter(c, decimal-leading-zero); display: block; margin-bottom: 10px;
  font-family: var(--mono); font-size: .65rem; font-weight: 500; letter-spacing: .2em; color: var(--primary);
}
.card ul { margin: 0; padding-left: 1.1rem; }
.card li { margin-bottom: .55rem; }
.card li::marker { color: var(--primary); }
.card p:last-child { margin-bottom: 0; }

/* ---------- products ---------- */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.logos li { padding: 0; border-radius: 28px; background: var(--greyLight-1); box-shadow: var(--shadow); transition: box-shadow .3s var(--ease); }
.logos li:hover { box-shadow: var(--shadow-inset); }
.logos a { display: flex; align-items: center; justify-content: center; height: 170px; padding: 20px; }
.logos img { max-height: 100%; width: auto; object-fit: contain; border-radius: 12px; mix-blend-mode: multiply; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 2.4rem; align-items: start; }
.contact address { font-style: normal; }
.contact address p { color: var(--text-dark); }
.contact address strong { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.map iframe { width: 100%; height: 420px; display: block; border: 0; padding: 8px; }
.map-ph {
  min-height: 420px; padding: 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.map-ph p { max-width: 40ch; }
.map-ph .btn { margin: .6rem 0 .4rem; }
@media (max-width: 720px) {
  .contact { grid-template-columns: 1fr; }
  .map iframe { height: 320px; }
  .map-ph { min-height: 280px; }
}

.center { text-align: center; }
.center .checks { display: inline-block; text-align: left; }
.center .checks li { background: none; box-shadow: none; border: 0; border-radius: 0; margin-bottom: 0; padding: .35rem 0 .35rem 1.9rem; }
.center .checks li::before { left: 4px; }
.center p { margin-left: auto; margin-right: auto; }

/* ---------- footer ---------- */
.footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  padding: 8px 0 44px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; line-height: 1.85; color: var(--muted);
}
.footer p { margin: 0; color: var(--muted); }
.footer a { color: var(--body); }
.footer a:hover { color: var(--primary-dark); }

@media (max-width: 600px) {
  .bar nav ul { gap: 8px; }
  .bar nav a { padding: 7px 12px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* home page service tiles: small line icon, top right */
.tiles li { position: relative; padding-right: 64px; }
.tiles .ico { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* header phone number: clearer digits than the mono face (8 vs 0) */
.callbar a { font-family: var(--display); font-size: .9rem; font-weight: 600; letter-spacing: .05em; font-variant-numeric: lining-nums; }

/* light/dark toggle button */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; color: var(--body); background: #c2c8d0; box-shadow: var(--shadow); transition: box-shadow .3s var(--ease), color .3s var(--ease); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .tt-moon, html[data-theme="light"] .tt-sun { display: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.theme-toggle:hover { color: var(--primary-dark); box-shadow: var(--shadow-inset); }