/* Fonts are self-hosted from /fonts (SIL Open Font Licence, see the OFL files there). */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/rubik-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
}

/* Russet Coat, from the brand repo's brand/colours.md */
:root {
  --ground: #F5EDE3;   /* Buff */
  --surface: #FCF8F2;
  --ink: #2A1912;      /* Eye stripe */
  --quiet: #6A5244;
  --accent: #A5431B;   /* Russet */
  --on-accent: #FFFFFF;
  --line: #DCCDBB;
  --galleries: url("/img/termite-galleries-light.svg");
  --leaves: url("/img/leaf-litter-light.svg");
  --head: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1F1511; /* Burrow */
    --surface: #2B1E18;
    --ink: #F4E9DC;    /* Cream */
    --quiet: #BDA797;
    --accent: #E58E5F; /* Ember */
    --on-accent: #1F1511;
    --line: #43332B;
    --galleries: url("/img/termite-galleries-dark.svg");
    --leaves: url("/img/leaf-litter-dark.svg");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #1F1511; /* Burrow */
  --surface: #2B1E18;
  --ink: #F4E9DC;    /* Cream */
  --quiet: #BDA797;
  --accent: #E58E5F; /* Ember */
  --on-accent: #1F1511;
  --line: #43332B;
  --galleries: url("/img/termite-galleries-dark.svg");
  --leaves: url("/img/leaf-litter-dark.svg");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 16px; top: -100px; background: var(--surface); color: var(--ink); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
/* Reading width for running text */
.measure { max-width: 720px; }

/* Two columns on wider screens: content, then a side card */
.grid { display: grid; gap: 0 56px; }
.grid > * { min-width: 0; }
.grid aside .card { margin-top: 48px; }

/* Type scale from the brand repo's brand/type.md */
h1, h2, h3 { font-family: var(--head); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: 33px; line-height: 1.15; }
h2 { font-size: 27px; line-height: 1.2; margin: 48px 0 12px; }
h3 { font-size: 21px; line-height: 1.3; margin: 32px 0 8px; }
h4 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
p, ul, ol { margin: 0 0 16px; }
ul, ol { padding-left: 20px; }
li { margin-bottom: 6px; }
.lede { font-size: 21px; line-height: 1.5; }
.small { font-size: 14px; line-height: 1.5; }
.quiet { color: var(--quiet); }

/* Header on the termite galleries, on every page. The logo sits straight on the texture. */
.site-header, .masthead { --fade: 40px; position: relative; isolation: isolate; background: var(--ground); }
/* The texture fades out at the bottom instead of stopping in a hard line */
.site-header::before, .masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--galleries) repeat top left;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
}
.masthead .site-header { background: none; }
.masthead .site-header::before { display: none; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 20px 44px; }
.masthead .site-header .wrap { padding-bottom: 20px; }
/* Clear space: one n is about a fifth of the lockup's height */
.site-header .logo { height: 72px; width: auto; }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; padding: 0; margin: 0; }
.site-header nav li { margin: 0; }
.site-header nav a { color: var(--ink); text-decoration: none; font-weight: 700; padding-block: 6px; display: inline-block; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 2px no-repeat; }
.site-header nav a:hover, .site-header nav a:focus-visible, .site-header nav a[aria-current="page"] { background-size: 100% 2px; }
/* Nav links sit on a plain pill */
.site-header nav ul { gap: 4px 28px; }

/* Home: the galleries carry on below the header, behind the numbat and the heading */
.hero { display: grid; gap: 24px; align-items: center; padding-block: 8px 48px; }
.hero img { width: 100%; max-width: 480px; height: auto; }
.hero h1 { max-width: 12em; font-size: 38px; line-height: 1.1; }

main { flex: 1 0 auto; padding-block: 48px 56px; }
/* Home ends with the numbat band, which holds the plain space above the footer */
main.home { padding-bottom: 0; }
main > .wrap > :first-child { margin-top: 0; }

/* Body text sits on a plain card, never on the texture */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  margin: 0 0 24px;
}
.card > :last-child { margin-bottom: 0; }
.card h2, .card h3 { margin-top: 0; }
.app-icon { width: 64px; height: 64px; border-radius: 14px; flex: none; }
.app-icon { margin-bottom: 16px; }

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.button:active { transform: none; }

dl { margin: 0; }
dt { font-weight: 700; margin-top: 20px; }
dd { margin: 4px 0 0; }

/* Plain band holding the numbat, between the content and the footer */
.rest { display: flex; justify-content: center; padding: 24px 16px 48px; }
.rest img { width: 640px; }


/* Footer: leaf litter band with short lines of text straight on it, in Ink for contrast. A plain band of 48px or more always sits above it. */
.site-footer {
  background: var(--ground) var(--leaves) repeat top left;
  padding: 40px 0;
  text-align: center;
}
.site-footer p { margin: 0 0 12px; text-wrap: balance; }
.site-footer .tagline { font-family: var(--head); font-weight: 600; font-size: 21px; line-height: 1.3; }
.site-footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; list-style: none; padding: 0; margin: 0 0 12px; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--ink); font-weight: 700; }
.site-footer .small { margin: 0; }

/* Sign-up form, on a plain card */
.signup label { display: block; font-weight: 700; margin-bottom: 6px; }
.signup input[type="email"] { -webkit-appearance: none; appearance: none; width: 100%; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--quiet); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.signup input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signup button { font-family: inherit; font-size: inherit; line-height: inherit; border: 0; cursor: pointer; }
.signup + .small { margin-top: 20px; }

@media (min-width: 720px) {
  h1 { font-size: 42px; }
  .site-header, .masthead { --fade: 56px; }
  .site-header .wrap { padding-block: 24px 64px; }
  .masthead .site-header .wrap { padding-bottom: 24px; }
  .site-header .logo { height: 96px; }
  .hero { padding-block: 16px 72px; }
  main { padding-block: 72px 96px; }
  h2 { margin-top: 64px; }
  .card { padding: 32px; }
  .rest { padding-bottom: 56px; }
  .site-footer { padding: 56px 0; }
}
@media (min-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .grid > :first-child { max-width: 720px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .hero h1 { font-size: 58px; }
}
@media (prefers-reduced-motion: no-preference) { a, .button { transition: color .15s, filter .15s, transform .15s; } }

/* Contents list at the top of long pages */
.toc h2 { font-size: 21px; margin: 0 0 8px; }
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2 12em; column-gap: 32px; }
.toc li { margin: 0; padding: 3px 0; break-inside: avoid; }
.toc li.sub { padding-left: 16px; }
html { scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }


/* Motion: the Home numbat slides in once on load, only if the visitor allows motion.
   Scroll-linked fades were removed on 31 October 2026 because Safari could leave sections half faded. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes nudge-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
  .hero img { animation: nudge-in 0.9s ease-out both; }
}

/* App screenshot in a simple phone shape */
.phone { margin: 0 auto 24px; width: 100%; max-width: 240px; border-radius: 34px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(42, 25, 18, 0.14); background: var(--surface); }
.phone img { width: 100%; height: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } }
:root[data-theme="dark"] .phone { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }

/* Three promises as columns */
.promise-section { padding: 72px 0 0; }
main.home .promise-section { padding-top: 56px; }
.promise-section h2 { margin-top: 0; text-align: center; }
.promise-cols { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 32px; }
.promise-cols li { margin: 0; text-align: center; }
.promise-icon { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--accent); }
.promise-cols h3 { margin: 16px 0 6px; }
.promise-cols p { margin: 0 auto; max-width: 20em; }
@media (min-width: 720px) { .promise-cols { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* Home sections: story and promises together, then One Job with a large screenshot */
main.home .story { max-width: 720px; }
main.home .story h2 { margin-top: 0; }
main.home .feature { margin-top: 96px; align-items: center; }
main.home .feature .phone { max-width: 340px; }
main.home .feature h2 { margin-top: 0; }
@media (min-width: 900px) {
  main.home .feature { grid-template-columns: minmax(0, 1fr) 400px; }
  main.home .feature { column-gap: 56px; align-items: center; }
  main.home .feature > :first-child { grid-column: 1; grid-row: 1; align-self: end; }
  main.home .feature > .phone { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  main.home .feature > .signup-block { grid-column: 1; grid-row: 2; align-self: start; }
  main.home .feature .phone { max-width: 380px; }
}
.phone { max-width: 300px; }

/* Light and dark switch */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.theme-toggle:hover { background: var(--surface); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; line-height: 0; }
.theme-toggle[data-mode="dark"] .icon-sun, .theme-toggle[data-mode="light"] .icon-moon { display: inline-flex; }
.site-header nav ul { align-items: center; }

/* Home: story with a headshot beside it */
.story { display: grid; gap: 32px; align-items: center; }
.story h2 { margin-top: 0; }
.headshot { margin: 0; justify-self: center; width: 160px; }
.headshot img { width: 100%; height: auto; border-radius: 50%; border: 1px solid var(--line); }
main.home .story { max-width: none; }
.feature .card { margin: 32px auto 24px; max-width: 520px; }
.rest.sniff img { width: 560px; max-width: 100%; height: auto; }
.feature .card h3 { margin-top: 0; }
@media (min-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; }
  .story > div { max-width: 720px; }
  .headshot { justify-self: center; width: 260px; }
}

@media (min-width: 720px) { .feature .card { margin-inline: 0; } }

.story.notfound { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.notfound .lede { max-width: 28em; margin-inline: auto; }
/* On narrow phones the sign-up button fills the card instead of wrapping onto two lines */
@media (max-width: 479px) { .signup .button { display: block; width: 100%; padding-inline: 16px; } }

/* Email confirm pages: more room between lines, and a numbat at the bottom */
.spaced { margin-top: 32px; }
.spaced > p { margin: 0 0 20px; }
.spaced > p:last-child { margin: 40px 0 0; }
.email-numbat { padding-top: 48px; }
.email-numbat img { width: 360px; max-width: 100%; height: auto; }
.email-numbat.tall img { width: 240px; }

/* Phone menu. Under 600px, with script, the links sit behind a menu button that slides open. Without script they stay in the header. */
.menu-button { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.menu-button:hover { background: var(--surface); }
.menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-button .cross { display: none; }
.menu-open .menu-button .bars { display: none; }
.menu-open .menu-button .cross { display: inline; }
@media (max-width: 599px) {
  .js .menu-button { display: inline-flex; }
  .js .site-header .wrap { row-gap: 0; }
  /* The nav grows from zero height. Closed, it is hidden so its links can't be tabbed to. */
  .js .site-header nav { display: grid; grid-template-rows: 0fr; flex-basis: 100%; visibility: hidden; transition: grid-template-rows 0.3s ease, visibility 0s 0.3s; }
  .js .site-header.menu-open nav { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.3s ease, visibility 0s; }
  .js .site-header nav ul { min-height: 0; overflow: hidden; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; text-align: left; }
  .js .site-header nav li:first-child { margin-top: 12px; }
  .js .site-header nav li { border-top: 1px solid var(--line); text-align: left; }
  .js .site-header nav li:last-child { padding-block: 8px; }
  .js .site-header nav a { display: block; text-align: left; padding-block: 14px; font-size: 19px; background-image: none; }
  .js .site-header nav a[aria-current="page"] { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .js .site-header nav, .js .site-header.menu-open nav { transition: none; }
}