/* Flownetic Consulting — marketing site
   ------------------------------------------------------------------
   Rebuilt to match the Squarespace original: Inter for headings at tight
   negative tracking, Raleway for body copy, black pill buttons, centred
   section headings with a rule beneath.

   Fonts are SELF-HOSTED variable woff2 (one file per family, ~45KB each).
   Google served the same variable file for every requested weight, so
   there is nothing gained by shipping four copies. Self-hosting keeps the
   _headers CSP at `default-src 'none'` with no font CDN to whitelist and
   nothing third-party that can fail or track.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/raleway.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #101010;
  --ink-2: #3d3d3d;
  --ink-3: #6d6d6d;
  --paper: #ffffff;
  --paper-2: #f4f4f4;
  --rule: #d8d8d8;
  --btn: #000000;
  --btn-ink: #ffffff;
  --focus: #101010;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --body: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f2f2;
    --ink-2: #c2c2c2;
    --ink-3: #9a9a9a;
    --paper: #0c0c0c;
    --paper-2: #161616;
    --rule: #2e2e2e;
    --btn: #ffffff;
    --btn-ink: #0c0c0c;
    --focus: #ffffff;
  }
}

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

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--btn); color: var(--btn-ink);
  padding: .6rem 1rem; z-index: 20;
}
.skip:focus { left: 0; }

a { color: inherit; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}

.wrap { max-width: 74rem; margin: 0 auto; padding: 0 2.5rem; }

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

.site-head { padding: 1.6rem 0; background: var(--paper); }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.wordmark { display: inline-flex; line-height: 0; }
.wordmark img { width: 15rem; height: auto; max-width: 60vw; }
/* The mark is solid black on transparency, so dark mode inverts it rather
   than shipping and maintaining a second asset. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark img { filter: invert(1); }
}

.site-nav { display: flex; gap: 1.75rem; align-items: center; font-family: var(--display); font-size: .95rem; }
.site-nav a { text-decoration: none; }
.site-nav a.plain { text-underline-offset: 6px; }
.site-nav a.plain[aria-current="page"] { text-decoration: underline; }

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

.btn {
  display: inline-block;
  background: var(--btn); color: var(--btn-ink);
  font-family: var(--display); font-size: .95rem; font-weight: 500;
  padding: 18px 23px; border-radius: 6.4px;
  text-decoration: none; border: 0; line-height: 1;
}
.btn:hover { opacity: .86; }
.btn-sm { padding: 12px 20px; }

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

.hero { padding: 3.5rem 0 6rem; text-align: center; }
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.2vw, 3.55rem);
  letter-spacing: -0.05em;
  line-height: 1.13;
  margin: 0 auto;
  max-width: 19ch;
}

/* ---------- sections ---------- */

section { padding: 4rem 0 5.5rem; }
section.tight { padding-top: 0; }

.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.33rem);
  letter-spacing: -0.05em;
  line-height: 1.15;
  margin: 0 0 3rem;
  display: inline-block;
  border-bottom: 2px solid currentColor;
  padding-bottom: .1em;
}
.centred { text-align: center; }

/* ---------- difference: copy left, image right ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

details.acc { border-top: 1px solid var(--ink); }
details.acc:last-of-type { border-bottom: 1px solid var(--ink); }
details.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: -0.05em;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-2);
}
details.acc[open] summary::after { content: "−"; }
details.acc .acc-body { padding: 0 0 1.3rem; color: var(--ink-2); font-size: 1rem; }
details.acc .acc-body p { margin: 0 0 .9rem; }
details.acc .acc-body p:last-child { margin-bottom: 0; }

.acc-actions { margin-top: 2.5rem; }

/* The original layers the photo over an offset grey panel. */
.framed { position: relative; }
.framed::before {
  content: "";
  position: absolute;
  inset: -2.5rem 2.5rem 2.5rem -2.5rem;
  background: var(--paper-2);
}
.framed img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
}

/* ---------- services ---------- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 3.5rem 2.5rem;
  margin-bottom: 3.5rem;
}
.service { text-align: center; }
/* Natural aspect ratios, matching the original. The three source images are
   750x422, 750x404 and 750x637, so the headings below them land at three
   different heights exactly as they do on the Squarespace site. Cropping to a
   shared ratio would align them, but this is a replica by request. */
.service img {
  display: block;
  width: 100%;
  max-width: 17.5rem;
  height: auto;
  margin: 0 auto 1.5rem;
  border-radius: 14px;
}
.service h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.04em;
  margin: 0 0 .7rem;
}
.service p { margin: 0 auto; max-width: 22rem; color: var(--ink-2); font-size: .97rem; }

/* ---------- contact page ---------- */

/* Left-aligned, as on the original contact page. */
dl.contact { display: grid; gap: 1.75rem; margin: 0; max-width: 34rem; }
dl.contact dt {
  font-family: var(--display); font-weight: 600;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
dl.contact dd { margin: .3rem 0 0; font-size: 1.15rem; }
.lede { font-size: 1.1rem; color: var(--ink-2); max-width: 38rem; margin: 0 auto 0; }
.hero .lede { margin-top: 1.5rem; }

address { font-style: normal; }

/* ---------- footer ---------- */

.site-foot { background: var(--paper-2); padding: 3rem 0; font-size: .93rem; }
.site-foot .wrap {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between;
}
.site-foot strong {
  font-family: var(--display); font-weight: 700;
  font-size: 1.35rem; letter-spacing: -0.04em;
  display: block; margin-bottom: .6rem;
}
.site-foot address { color: var(--ink-2); }
.site-foot .contact-col strong { font-size: .93rem; letter-spacing: normal; font-family: var(--body); }

@media (max-width: 52rem) {
  .wrap { padding: 0 1.4rem; }
  .split { grid-template-columns: 1fr; gap: 4.5rem; }
  .framed::before { inset: -1.25rem 1.25rem 1.25rem -1.25rem; }
  .hero { padding: 2.5rem 0 4rem; }
  section { padding: 3rem 0 4rem; }
}