/* ==========================================================================
   APOVIX TECHNOLOGIES — Homepage styles
   Order:  1 Tokens  2 Reset  3 Typography  4 Layout  5 Buttons  6 Header
           7 Hero  8 Services  9 Work  10 Process  11 Stack  12 About
           13 Contact  14 Footer  15 Motion / reveal
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Brand colour — #FF6600 is for fills only, never text on white */
  --accent:      #FF6600;
  --accent-dark: #CC5200;   /* orange TEXT and links */
  --ink:         #2B2B2B;
  --body:        #545454;
  --muted:       #8A8A8A;
  --line:        #E6E6E6;
  --surface:     #FAFAFA;
  --white:       #FFFFFF;

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --text-xs:  0.75rem;    /* 12 — eyebrows */
  --text-sm:  0.875rem;   /* 14 — captions, tags */
  --text-base: 1.0625rem; /* 17 — body */
  --text-lg:  1.125rem;   /* 18 — lede */
  --text-xl:  1.25rem;    /* 20 — card titles */
  --text-2xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);   /* 22 → 28 */
  --text-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);       /* 28 → 40 */
  --text-4xl: clamp(2.25rem, 1.4rem + 4vw, 4rem);         /* 36 → 64 — h1 */

  /* Space */
  --space-section: clamp(2.75rem, 5.5vw, 5rem);  /* 44 → 80 */
  --container:  1200px;
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);

  /* Shape */
  /* Square corners everywhere: the tokens stay so one change here reverses it. */
  --radius:    0;      /* cards, inputs, panels */
  --radius-sm: 0;      /* buttons, chips */
  --radius-lg: 0;      /* feature panels */
  --radius-pill: 0;

  /* Depth — a premium page reads as layered, not flat. Shadows stay neutral and
     low-alpha so they register as light, never as grey smudge. */
  --shadow-xs: 0 1px 2px rgba(16, 18, 22, .05);
  --shadow-sm: 0 1px 3px rgba(16, 18, 22, .06), 0 1px 2px rgba(16, 18, 22, .04);
  --shadow-md: 0 4px 12px rgba(16, 18, 22, .07), 0 2px 4px rgba(16, 18, 22, .04);
  --shadow-lg: 0 14px 32px rgba(16, 18, 22, .10), 0 4px 10px rgba(16, 18, 22, .05);
  --shadow-xl: 0 28px 60px rgba(16, 18, 22, .13), 0 8px 18px rgba(16, 18, 22, .06);
  --shadow-accent: 0 8px 22px rgba(255, 102, 0, .28);

  /* Dark surfaces — the contrast band that stops the page reading as one long
     white scroll. */
  --ink-900: #14161A;
  --ink-800: #1C1F25;
  --ink-700: #262A32;
  --on-dark:      #F4F5F7;
  --on-dark-mute: #9BA1AC;
  --on-dark-line: rgba(255, 255, 255, .10);

  --ease: cubic-bezier(.22, .61, .36, 1);

  --focus: var(--accent-dark);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky and 72px tall. Without this, every in-page link lands
     with its heading tucked underneath the header — worst on a phone, where the
     header eats a bigger share of the screen. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
/* Keep aspect ratio when max-width kicks in. Components that need a fixed box
   (.logo__mark, .founder__photo) override this with a higher-specificity rule. */
img { height: auto; }
address { font-style: normal; }
button { font: inherit; }

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

/* Visible keyboard focus ring on every interactive element */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }
.section--surface { background: var(--surface); }
.section--tight  { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }

.section__head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.section__title { font-size: var(--text-3xl); }
.section__lede {
  font-size: var(--text-lg);
  margin-top: 1.25rem;
  max-width: 38rem;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--white);       /* white on orange = fine; orange text is never on white */
}
.btn--primary:hover { background: var(--accent-dark); }

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

.btn--block { width: 100%; }

/* ==========================================================================
   6. HEADER + MOBILE MENU
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

/* Logo lockup ------------------------------------------------------------- */
.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  margin-right: auto;
}

/* A highlight that crosses the mark every few seconds. The PNG masks it, so
   the shine follows the arrow rather than a box around it; the pause between
   passes is the still stretch at the start of the keyframes. */
.logo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(226, 232, 240, 0.30) 46%,
    rgba(255, 255, 255, 0.98) 50%,
    rgba(203, 213, 225, 0.45) 54%,
    transparent 60%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-mask: url("../img/logo-mark.png") center / contain no-repeat;
          mask: url("../img/logo-mark.png") center / contain no-repeat;
  animation: logo-shine 6.5s linear infinite;
}

/* Still for about five seconds, then the flash crosses in a little over a
   second. It resets off-screen, so the jump back to the start never shows. */
@keyframes logo-shine {
  0%, 74%   { background-position: -65% 0; }
  92%, 100% { background-position: 165% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo::after { animation: none; opacity: 0; }
}
.logo__mark {
  height: 36px;
  width: 36px;
  flex: none;
  color: var(--accent);
}
/* The mark is a transparent PNG and is not square — contain it rather than
   stretching it into the 36px box. */
img.logo__mark { object-fit: contain; }
.logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  color: var(--ink);
}
.logo--footer .logo__mark { height: 32px; width: 32px; color: var(--white); }
.logo--footer::after { width: 32px; height: 32px; }
.logo--footer .logo__word { color: var(--white); }

/* Desktop nav ------------------------------------------------------------- */
/* Six items plus the CTA is a lot for a 960px header — the gap opens back up
   once there is room for it. */
.site-nav__list { display: flex; gap: 1.375rem; }
@media (min-width: 1120px) { .site-nav__list { gap: 2rem; } }
.site-nav__list a {
  color: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease;
}
.site-nav__list a:hover { color: var(--ink); }

.site-nav, .site-header__cta { display: none; }
.site-header__cta { padding: 0.7rem 1.25rem; }

/* Hamburger --------------------------------------------------------------- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle__bars { display: block; width: 22px; }
.menu-toggle__bars span {
  display: block;
  height: 2px;
  background: currentColor;
}
.menu-toggle__bars span + span { margin-top: 6px; }
.menu-toggle__x { position: relative; width: 22px; height: 22px; display: block; }
.menu-toggle__x::before,
.menu-toggle__x::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
}
.menu-toggle__x::before { transform: rotate(45deg); }
.menu-toggle__x::after  { transform: rotate(-45deg); }

/* Full-screen overlay menu ------------------------------------------------ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__bar {
  display: flex;
  align-items: center;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__nav { padding-block: 2.5rem; }
.mobile-menu__nav ul { margin-bottom: 2.5rem; }
.mobile-menu__nav li + li { border-top: 1px solid var(--line); }
.mobile-menu__nav a:not(.btn) {
  display: block;
  padding: 1.125rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

body.is-locked { overflow: hidden; }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5.5vw, 4.75rem) clamp(2.75rem, 6vw, 5.25rem);
}

/* Faint background logo mark is hidden to keep focus on the hero illustration */
.hero__mark {
  display: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: min(1340px, calc(100vw - 2 * var(--gutter)));
}

/* One centred column: the illustration that used to sit beside this is gone,
   and left-aligned copy would leave the right half of the hero empty. */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  font-size: var(--text-4xl);
  max-width: 20ch;
  letter-spacing: -0.03em;
}

.hero__lede {
  font-size: var(--text-lg);
  margin-top: 1.125rem;
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 1.875rem;
}

@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
  .hero__title {
    max-width: 24ch;
  }
}

/* ==========================================================================
   8. SERVICES
   ========================================================================== */
.cards {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color .25s ease,
              box-shadow .25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 102, 0, 0.35);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(255, 102, 0, 0.04);
}

.card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #FAF7F4 0%, #F4ECE4 100%);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}

.card__media::before {
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle at 50% 60%, rgba(255, 102, 0, 0.09) 0%, transparent 65%);
  pointer-events: none;
  border-radius: 50%;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.05));
}

.card:hover .card__img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.card__title {
  font-size: var(--text-xl);
  margin-bottom: 0.625rem;
  color: var(--ink);
}

.card__text {
  font-size: var(--text-base);
  color: var(--body);
  margin-bottom: 1.25rem;
}

.card__list {
  border-top: 1px solid var(--line);
  padding-top: 1.125rem;
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--body);
}

.card__list li {
  position: relative;
  padding-left: 1.125rem;
  line-height: 1.5;
}

.card__list li + li {
  margin-top: 0.5rem;
}

.card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

/* ==========================================================================
   9. WORK
   ========================================================================== */
.work-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}

.work-card__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.work-card__shot svg {
  width: 44px; height: 44px;
  color: var(--line);
}
.work-card__shot span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
/* When you drop in real screenshots:
   <img class="work-card__shot" src="..." alt="CareVix dashboard" />
   Landscape shots are shown whole (never cropped) and sit inside a padded frame. */
img.work-card__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  padding: 0.75rem;
}

.work-card__title { font-size: var(--text-xl); margin-bottom: 0.5rem; }
.work-card__text  { margin-bottom: 1rem; max-width: 46ch; }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.25rem 0.625rem;
  background: var(--white);
}

/* ==========================================================================
   10. PROCESS
   ========================================================================== */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

/* The hairline rule that connects the steps.
   The border spans the full grid column (gap is 0) so the segments meet and
   read as one continuous line; the text is inset with padding instead. */
.step__body {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  padding-right: clamp(1rem, 2vw, 2rem);
}
.step:last-child .step__body { padding-bottom: 0; padding-right: 0; }

.step__name { font-size: var(--text-lg); margin-bottom: 0.5rem; }
.step__text { font-size: var(--text-sm); line-height: 1.55; }

/* ==========================================================================
   11. TECH STACK
   ========================================================================== */
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  color: var(--muted);
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   12. ABOUT
   ========================================================================== */
/* The intro sits full width above the founder rows, rather than sharing a
   two-column grid with them. */
.about__intro { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.about__text + .about__text { margin-top: 1.125rem; }
.about__text { max-width: 42ch; }
.about__intro .section__title { margin-bottom: 1.5rem; }

/* One founder per row, full width of the page. */
.founders { display: grid; gap: 1.125rem; align-content: start; }

.founder {
  display: flex;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* The text takes the remaining width, which pins the photo to one edge */
.founder > div { flex: 1; min-width: 0; }
/* Second row mirrors the first: portrait on the right instead of the left */
.founder:nth-child(even) { flex-direction: row-reverse; }

/* The flash needs a pseudo-element, which an <img> cannot have, so the circle
   itself is this wrapper and the portrait fills it. */
.founder__avatar {
  position: relative;
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
}
@media (min-width: 640px) {
  .founder__avatar { width: 128px; height: 128px; }
}
@media (min-width: 960px) {
  .founder__avatar { width: 144px; height: 144px; }
}
.founder__avatar > .founder__photo { width: 100%; height: 100%; }

/* White, where the logo and buttons use silver: these are photographs, and a
   grey band over a face reads as dirt on the lens. */
.founder__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.30) 46%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0.30) 54%,
    transparent 60%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: logo-shine 6.5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .founder__avatar::after { animation: none; opacity: 0; }
}

.founder__photo {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* A full-width row can carry a larger portrait than a narrow column could */
@media (min-width: 640px) {
  .founder__photo { width: 128px; height: 128px; }
}
@media (min-width: 960px) {
  .founder__photo { width: 144px; height: 144px; }
}
.founder__photo svg { width: 26px; height: 26px; color: var(--line); }
/* Replace with: <img class="founder__photo" src="..." alt="Portrait of [name]" /> */
img.founder__photo { object-fit: cover; }

.founder__name { font-size: var(--text-2xl); }
.founder__role {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0.5rem 0 0.875rem;
}
.founder__bio { font-size: var(--text-base); line-height: 1.6; max-width: 64ch; }

/* ==========================================================================
   13. CONTACT
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
}

.contact__details { margin-top: 1.75rem; }
.contact__details li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
}
.contact__icon {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 0.25rem;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
/* The WhatsApp mark is a filled glyph, not a line icon, and it is recognised by
   its green — drawn in the site's orange stroke style it stops reading as
   WhatsApp at all. */
.contact__icon--wa {
  fill: #25D366;
  stroke: none;
}

/* A button rather than a bare link: the number is deliberately not shown, so
   the label has to carry the whole action. White on #25D366 fails contrast
   (about 2:1), so the fill is WhatsApp's darker green, which clears 4.5:1. */
/* Scoped under .contact__details on purpose: `.contact__details a` sets ink
   text, an orange underline on hover, and (on phones) a smaller padding — and
   at 0,1,1 it outranks a bare .whatsapp-link. Without the extra class the label
   came out dark-on-dark-green and unreadable. */
.whatsapp-link,
.contact__details .whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0.5rem 1rem;
  background: #117A47;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.whatsapp-link:hover,
.contact__details .whatsapp-link:hover {
  background: #0C5E36;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.whatsapp-link:focus-visible { outline: 2px solid #117A47; outline-offset: 3px; }

.contact__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.contact__details a { color: var(--ink); text-decoration: none; }
.contact__details a:hover { color: var(--accent-dark); text-decoration: underline; }

/* Form -------------------------------------------------------------------- */
.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.field + .field, .form .btn { margin-top: 1.25rem; }

.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.field__optional { color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #CFCFCF; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238A8A8A' stroke-width='1.5'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

.field [aria-invalid='true'] { border-color: var(--accent-dark); }

.field__error {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--accent-dark);
}
.field__error[hidden] { display: none; }

.form__status {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.form__status[hidden] { display: none; }
/* Submission failed — the visitor needs to notice, and needs another route */
.form__status--error {
  background: #FEE4E2;
  border-color: #F3B4AE;
  border-left-color: #B42318;
  color: #B42318;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: #B8B8B8;
  padding-block: clamp(2.25rem, 4vw, 3.25rem) 1.5rem;
  --focus: #FFFFFF;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.site-footer__text {
  margin-top: 1.5rem;
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.socials { display: flex; gap: 0.75rem; margin-top: 1.75rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid #444;
  border-radius: var(--radius);
  color: #D6D6D6;
  transition: border-color .18s ease, color .18s ease;
}
.socials a:hover { border-color: var(--accent); color: var(--white); }
.socials svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.site-footer__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 1.125rem;
}
.site-footer__links a {
  color: #B8B8B8;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color .15s ease;
}
.site-footer__links a:hover { color: var(--white); }
.site-footer__links li + li { margin-top: 0.75rem; }

.site-footer__bottom {
  display: grid;
  gap: 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid #3F3F3F;   /* hairline divider */
  font-size: var(--text-xs);
  color: #9A9A9A;
}
.site-footer__reg { display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; }
.site-footer__legal { display: flex; gap: 1.5rem; }
.site-footer__legal a { color: #9A9A9A; text-decoration: none; }
.site-footer__legal a:hover { color: var(--white); text-decoration: underline; }

/* ==========================================================================
   15. MOTION — subtle fade-and-rise on section entry only
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Already on screen at load — appear at once, with no transition to watch */
.js .reveal.is-instant { transition: none; }

/* Stagger cards within a group a little */
.js .cards .reveal:nth-child(2),
.js .work-grid .reveal:nth-child(2) { transition-delay: .08s; }
.js .cards .reveal:nth-child(3),
.js .work-grid .reveal:nth-child(3) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Row 1: copyright left, legal links right. Row 2: registration numbers. */
  .site-footer__bottom {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem 2rem;
  }
  .site-footer__bottom > p:first-child { grid-area: 1 / 1; }
  .site-footer__legal { grid-area: 1 / 2; justify-self: end; }
  .site-footer__reg   { grid-area: 2 / 1 / 3 / -1; }
}

@media (min-width: 860px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr 1fr; align-items: start; }
  .site-footer__top { grid-template-columns: 1.2fr 1.8fr; }
  /* Four groups now (Services, Products, Company, Legal). auto-fit lets them
     settle into 2 columns on a narrow desktop and 4 on a wide one, instead of
     a fixed count that orphans the last group. */
  .site-footer__links { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
}

@media (min-width: 960px) {
  /* Desktop nav on, hamburger off */
  .site-nav, .site-header__cta { display: block; }
  .menu-toggle { display: none; }
  .logo { margin-right: 0; }
  .site-nav { margin-left: auto; margin-right: 2rem; }

  /* Process becomes a horizontal row with one continuous rule */
  .process { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .step__body { padding-bottom: 0; }
}

/* ==========================================================================
   16. SUBPAGES — About, Privacy, Terms, Refund
   Same tokens as the homepage. Nothing new is introduced here except the
   reading column, the sticky contents list and the [TO BE FILLED] marker.
   ========================================================================== */

/* --- Page head band ------------------------------------------------------ */
.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 3vw, 2rem);
}
.page-head__title { font-size: var(--text-3xl); max-width: 22ch; }
.page-head__lede {
  font-size: var(--text-lg);
  max-width: 46rem;
  margin-top: 1rem;
}
.page-head__meta {
  margin-top: 1.75rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Breadcrumb back to the homepage */
.crumb {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent-dark); text-decoration: underline; }

/* --- Legal layout: contents list + reading column ------------------------ */
.legal {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

.toc {
  font-size: var(--text-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--white);
}
.toc__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.875rem;
}
.toc ol { display: grid; gap: 0.5rem; counter-reset: toc; }
.toc li { counter-increment: toc; display: flex; gap: 0.625rem; }
.toc li::before { content: counter(toc) "."; color: var(--muted); flex: none; }
.toc a { color: var(--body); text-decoration: none; }
.toc a:hover { color: var(--accent-dark); text-decoration: underline; }

/* --- Reading column ------------------------------------------------------ */
.prose { max-width: 45rem; }
.prose > * + * { margin-top: 1.125rem; }
/* Anchor offset is handled once by scroll-padding-top on <html>; adding
   scroll-margin here as well would stack the two and overshoot. */
.prose h2 {
  font-size: var(--text-2xl);
  margin-top: clamp(1.875rem, 3.5vw, 2.5rem);
}
.prose h3 {
  font-size: var(--text-lg);
  margin-top: 2rem;
}
.prose ul, .prose ol {
  padding-left: 1.5rem;
  display: grid;
  gap: 0.625rem;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 600; }

/* Note block — used for the "this does not override your SOW" line */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 1rem 1.25rem;
  font-size: var(--text-sm);
}

/* --- [TO BE FILLED] marker ----------------------------------------------- */
/* Deliberately loud. Nothing on these pages may go live with one still in it. */
.fill {
  background: #FFF3B0;
  box-shadow: inset 0 -2px 0 #E0B400;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9em;
  padding: 0.1em 0.4em;
}
.fill--block {
  display: block;
  padding: 0.75rem 1rem;
  box-shadow: inset 0 0 0 1px #E0B400;
}

/* --- Company details table (About page) ---------------------------------- */
.details { border-top: 1px solid var(--line); margin-top: 1.5rem; }
.details__row {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line);
}
.details__key {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.details__val { color: var(--ink); }

@media (min-width: 640px) {
  .details__row { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
}

@media (min-width: 960px) {
  .legal { grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  .toc {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
}

/* ==========================================================================
   18. PRODUCTS PAGE
   One product per row: screenshot, then the copy beneath it. Becomes two
   columns from 860px so the shot and the feature list sit side by side.
   ========================================================================== */
.products { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }

.product {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.product__name { font-size: var(--text-3xl); margin-bottom: 0.75rem; }
.product__lede {
  font-size: var(--text-lg);
  max-width: 42ch;
  margin-bottom: 1.25rem;
}
.product .card__list { border-top: 1px solid var(--line); }

.product__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.5rem;
}
.product__note { margin-top: 1.25rem; font-size: var(--text-sm); }

@media (min-width: 860px) {
  .product { grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 4vw, 4rem); }
  /* Alternate the image side so the page does not read as a single column */
  .product:nth-child(even) > img { order: 2; }
}

@media (max-width: 520px) {
  .product__actions .btn { width: 100%; }
}

/* ==========================================================================
   19. ACCOUNT PAGES — register, sign in, account
   A single centred reading column; the site chrome stays identical.
   ========================================================================== */
.auth-wrap { display: grid; justify-items: center; }

.auth-card {
  width: 100%;
  max-width: 34rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.auth-card__title { font-size: var(--text-2xl); margin-bottom: 0.75rem; }
.auth-card__lede { margin-bottom: 1.75rem; max-width: 44ch; }
.auth-card__consent {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
  margin: 1.5rem 0;
}
.auth-card__foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

/* The card already provides the frame, so the form inside drops its own */
.form--plain { background: none; border: 0; padding: 0; }

.req { color: var(--accent-dark); }
.field__hint { font-size: var(--text-sm); color: var(--muted); margin-top: 0.375rem; }
.field input:disabled {
  background: var(--surface);
  color: var(--muted);
  cursor: not-allowed;
}

/* A button that reads as a link — used for sign out, resend, forgot password */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-dark);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Feedback blocks, matching the admin panel's vocabulary */
.notice {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--text-sm);
  margin-bottom: 1.25rem;
}
.notice[hidden] { display: none; }
.notice--error { background: #FEE4E2; border-color: #F3B4AE; color: #B42318; }
.notice--ok    { background: #E8F5EE; border-color: #A8DCC0; color: #1B7F4F; }
.notice--warn  { background: #FFF6DC; border-color: #E8CE84; color: #9A6700; }
.notice .linkish { color: inherit; }

/* Google button and the divider beneath it */
.google-btn { gap: 0.625rem; }
.google-btn svg { flex: none; }

.or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Shown on the register page once Google has identified the visitor */
.signed-as {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  margin-bottom: 1.5rem;
}
.signed-as[hidden] { display: none; }
.signed-as__who { min-width: 0; overflow-wrap: anywhere; }
.signed-as__who strong { color: var(--ink); }
.signed-as .linkish { font-size: var(--text-sm); white-space: nowrap; }

/* --- Products dropdown ---------------------------------------------------
   A button, not a link, because it opens a menu rather than going anywhere.
   The panel is [hidden] until JS opens it, so with JS off the trigger simply
   does nothing and the Products page is still reachable from the footer. */
.nav-item--menu { position: relative; }

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s ease;
}
.nav-trigger:hover, .nav-trigger[aria-expanded='true'] { color: var(--ink); }
.nav-trigger::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.nav-trigger[aria-expanded='true']::after { transform: translateY(1px) rotate(-135deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  min-width: 15rem;
  padding: 0.375rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05);
}
.nav-menu[hidden] { display: none; }

.nav-menu a {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color .13s ease;
}
.nav-menu a:hover { background: var(--surface); }
.nav-menu__desc {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.0625rem;
}
.nav-menu__rule { height: 1px; background: var(--line); margin: 0.375rem 0.25rem; }
.nav-menu__all { font-weight: 500; color: var(--body); font-size: var(--text-sm); }

/* Mobile: the panel is not floating, it opens inline under the item */
.mobile-menu__nav .nav-item--menu { position: static; }
.mobile-menu__nav .nav-trigger {
  width: 100%;
  justify-content: space-between;
  padding: 1.125rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}
.mobile-menu__nav .nav-trigger::after { width: 9px; height: 9px; }
.mobile-menu__nav .nav-menu {
  position: static;
  transform: none;
  min-width: 0;
  padding: 0 0 0.875rem;
  border: 0;
  box-shadow: none;
  background: none;
}
.mobile-menu__nav .nav-menu a {
  padding: 0.625rem 0 0.625rem 1rem;
  border-left: 2px solid var(--line);
  border-radius: 0;
  font-size: 1.0625rem;
}
.mobile-menu__nav .nav-menu a:hover { background: none; border-left-color: var(--accent); }
.mobile-menu__nav .nav-menu__rule { display: none; }

/* --- Avatars ------------------------------------------------------------- */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* No Google photo — a brand-coloured disc with their initials instead */
.avatar--initials {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* The signed-in chip that replaces "Sign in" in the header */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--body);
  font-weight: 500;
  transition: color .15s ease;
}
.user-chip:hover { color: var(--ink); }
.user-chip__name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mobile-menu__nav .user-chip {
  padding: 1.125rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}
.mobile-menu__nav .user-chip__name { max-width: none; }

/* Signed in with Google but never finished the form — the phone number is
   still missing, so the chip points at register rather than account. */
.user-chip--incomplete .avatar {
  box-shadow: 0 0 0 2px var(--accent);
}
.user-chip--incomplete .user-chip__name {
  color: var(--accent-dark);
  max-width: none;
}

.profile-banner {
  background: #FFF6DC;
  border-bottom: 1px solid #E8CE84;
  color: #7A5200;
}
.profile-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 0.75rem;
}
.profile-banner__text { font-size: var(--text-sm); max-width: 60ch; }
.profile-banner__text strong { color: #5C3D00; }
.profile-banner .btn--sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }

/* The account page's own heading avatar */
.account-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.account-head .avatar { width: 56px; height: 56px; font-size: 1.25rem; }
.account-head__meta { min-width: 0; }
.account-head__email {
  font-size: var(--text-sm);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.signed-as .avatar { width: 36px; height: 36px; }
.signed-as__id { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }

/* Two fields per row once there is room — keeps the form from reading as an
   endless single column. */
.field-row { display: grid; gap: 0; }
.field-row > .field + .field { margin-top: 1.25rem; }

@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .field-row > .field + .field { margin-top: 0; }
}

/* .field spacing assumes adjacent siblings; a row breaks that chain */
.field-row + .field, .field + .field-row, .field-row + .field-row { margin-top: 1.25rem; }

/* ==========================================================================
   17. PHONE REFINEMENTS
   The layout above is already mobile-first; this section fixes the places
   where a 360–430px screen is genuinely worse off, not just narrower.
   ========================================================================== */

/* --- Contents list: a disclosure on phones, a plain list on desktop ------- */
/* Twenty clause links ahead of the text is a wall to scroll past on a phone,
   so the list collapses. main.js opens it automatically from 960px up. */
.toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  min-height: 44px;          /* comfortable thumb target */
  margin-bottom: 0;          /* only spaced out once the list is showing */
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.toc[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.toc[open] > summary { margin-bottom: 0.875rem; }

/* Roomier rows so a fingertip does not catch the neighbouring clause */
.toc ol { gap: 0.125rem; }
.toc li { align-items: baseline; }
.toc a { display: block; padding-block: 0.5rem; flex: 1; }

@media (min-width: 960px) {
  /* Back to a static heading — no chevron, no toggling */
  .toc > summary { cursor: default; min-height: 0; margin-bottom: 0.875rem; }
  .toc > summary::after { display: none; }
  .toc ol { gap: 0.5rem; }
  .toc a { padding-block: 0; }
}

@media (max-width: 720px) {
  /* --- Tech stack: 2.5rem of column gap reads as scattered on a phone ----- */
  .stack { gap: 0.625rem 1.5rem; font-size: var(--text-base); }

  /* --- Screenshots: claw back a little width inside the frame ------------- */
  img.work-card__shot { padding: 0.4rem; }

  /* --- Contact rows: let a long email wrap rather than push the row wide -- */
  .contact__details li > div { min-width: 0; overflow-wrap: anywhere; }
  .contact__details a { display: inline-block; padding-block: 0.25rem; }

  /* --- Legal pages: a touch more air between clause headings and text ----- */
  .prose h2 { margin-top: 2.5rem; }
  .fill--block { font-size: var(--text-sm); }

  /* --- Footer: bigger targets, and stop the two columns crowding ---------- */
  .site-footer__links { gap: 2rem 1.25rem; }
  .site-footer__links a { display: inline-block; padding-block: 0.3125rem; }
  .site-footer__links li + li { margin-top: 0.25rem; }
  .site-footer__legal { gap: 1.25rem; }
  .site-footer__legal a { display: inline-block; padding-block: 0.375rem; }
}

/* --- Phone-width only ----------------------------------------------------
   These two would look wrong on a tablet, so they stop well before 720px:
   the founder card still has ~660px to work with at that size. */
@media (max-width: 520px) {
  /* Stack the card, so the bio is not squeezed into a ~150px column.
     The :nth-child selector must be repeated here — it outranks a bare
     .founder rule and would otherwise keep the second row reversed. */
  .founder,
  .founder:nth-child(even) { flex-direction: column; gap: 1rem; padding: 1.25rem; }

  /* Full-width buttons are far easier to hit than two side by side */
  /* Stretch the row to the column so the buttons centre on the screen rather
     than inside a box shrink-wrapped to their own width. */
  .hero__actions {
    align-self: stretch;
    justify-content: center;
    gap: 0.625rem;
  }
  .hero__actions .btn {
    width: auto;
    flex: 0 1 auto;
    padding: 0.75rem 1.15rem;
    font-size: 0.875rem;
  }
}

/* --- Very narrow phones (iPhone SE and similar) --------------------------- */
@media (max-width: 380px) {
  .logo__word { font-size: 1rem; letter-spacing: 0.16em; }
  .logo__mark { height: 30px; width: 30px; }
  .logo::after { width: 30px; height: 30px; }
  .site-header__inner { gap: 0.75rem; }
  .stack { gap: 0.5rem 1.125rem; }
  .details__key { letter-spacing: 0.06em; }
}

/* ==========================================================================
   20. PREMIUM LAYER
   Depth, contrast and polish on top of the base sheet above. Loaded last so it
   wins on specificity ties without touching the original rules.

   The three moves that carry the "established company" read:
     a. layered surfaces   — cards lift off the page instead of being outlined
     b. a dark contrast band — breaks the single white scroll
     c. real proof         — a numbers strip directly under the hero
   ========================================================================== */

/* --- a. Section rhythm ---------------------------------------------------
   Premium pages breathe. The base 44-80px band is tight for a full-width
   layout, so open it up once there is room. */
.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--tight { padding-block: clamp(2rem, 3.5vw, 3rem); }

.section--surface {
  background: linear-gradient(180deg, #FBFBFC 0%, var(--surface) 100%);
  border-block: 1px solid var(--line);
}

.section__title { letter-spacing: -0.03em; }

/* The eyebrow gets a leading hairline — a small mark of deliberateness that
   costs nothing and reads as art-directed rather than default. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--accent-dark);
  font-weight: 600;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}

/* --- Header: glass ------------------------------------------------------- */
.site-header {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-sm);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .site-header { background: var(--white); }
}

/* Nav links get an underline that grows from the left on hover. */
.site-nav__list a:not(.btn) { position: relative; padding-block: 0.35rem; }
.site-nav__list a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.site-nav__list a:not(.btn):hover::after { transform: scaleX(1); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  padding: 0.9375rem 1.625rem;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease),
              box-shadow .25s var(--ease);
}
.btn--primary {
  background: linear-gradient(180deg, #FF7A1A 0%, var(--accent) 100%);
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(255, 102, 0, .34);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: var(--white);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.btn--ghost:hover {
  border-color: #D0D3D9;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.site-header__cta { padding: 0.7rem 1.25rem; }

/* --- b. Hero ------------------------------------------------------------- */
/* A soft warm wash behind the whole hero, plus a hairline grid. Neither is
   visible as an object — they just stop the top of the page being a flat
   white rectangle. */
.hero {
  background:
    radial-gradient(70rem 40rem at 78% 8%,  rgba(255, 122, 26, .10), transparent 62%),
    radial-gradient(48rem 34rem at 4%  92%, rgba(255, 102, 0,  .05), transparent 60%),
    linear-gradient(180deg, #FFFCFA 0%, var(--white) 72%);
  padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(20, 22, 26, .085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 22, 26, .085) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70rem 42rem at 50% 38%, #000 40%, transparent 85%);
  mask-image: radial-gradient(70rem 42rem at 50% 38%, #000 40%, transparent 85%);
}

.hero__title { letter-spacing: -0.035em; }

/* A short reassurance line under the buttons, where the eye lands next. */
.hero__note {
  justify-content: center;
  margin-top: 1.125rem;
  font-size: var(--text-sm);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__note svg { flex: none; color: var(--accent-dark); }

/* --- c. Proof strip ------------------------------------------------------ */
/* Four figures directly under the hero. Every one of them restates a claim
   made elsewhere on this page — nothing here is a number we cannot stand
   behind. */
.proof { border-top: 1px solid var(--line); background: var(--white); }
.proof__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-inline: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
@media (min-width: 860px) {
  .proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.proof__item {
  background: var(--white);
  padding: clamp(1.25rem, 2.5vw, 1.875rem);
  transition: background-color .25s var(--ease);
}
.proof__item:hover { background: #FFFBF8; }
.proof__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.proof__num span { color: var(--accent); }
.proof__label {
  margin-top: 0.625rem;
  font-size: var(--text-sm);
  color: var(--body);
  line-height: 1.5;
}

/* --- Service cards: lift, don't outline ---------------------------------- */
.cards { gap: clamp(1rem, 2vw, 1.5rem); }

.card {
  position: relative;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #FFA45C);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
  z-index: 3;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card:hover::after { transform: scaleX(1); }
.card__media img { transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }

/* --- Work cards ---------------------------------------------------------- */
.work-card { transition: transform .3s var(--ease); }
.work-card:hover { transform: translateY(-4px); }
.work-card__shot {
  box-shadow: var(--shadow-md);
  transition: box-shadow .3s var(--ease), transform .5s var(--ease);
}
.work-card:hover .work-card__shot {
  box-shadow: var(--shadow-xl);
  transform: scale(1.01);
}

.tags li {
  border-radius: var(--radius-pill);
  padding: 0.3125rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  font-weight: 500;
}

/* --- b. Process: the dark band ------------------------------------------ */
.section--dark {
  background:
    radial-gradient(52rem 30rem at 12% -10%, rgba(255, 102, 0, .16), transparent 62%),
    radial-gradient(42rem 26rem at 92% 110%, rgba(255, 102, 0, .10), transparent 60%),
    var(--ink-900);
  color: var(--on-dark-mute);
  border-block: 0;
  position: relative;
  overflow: hidden;
}
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(60rem 32rem at 50% 40%, #000, transparent 76%);
  mask-image: radial-gradient(60rem 32rem at 50% 40%, #000, transparent 76%);
}
.section--dark > .container { position: relative; z-index: 1; }
.section--dark .section__title { color: var(--on-dark); }
.section--dark .section__lede  { color: var(--on-dark-mute); }
.section--dark .eyebrow        { color: #FF9248; }
.section--dark .eyebrow::before { background: #FF9248; }

/* Five steps joined by a rule that runs through the number row. */
.process--rail { position: relative; }
.process--rail .step { position: relative; }
.process--rail .step__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ink-800);
  border: 1px solid var(--on-dark-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #FF9248;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              color .3s var(--ease);
}
.process--rail .step:hover .step__num {
  border-color: rgba(255, 146, 72, .55);
  box-shadow: 0 0 0 5px rgba(255, 102, 0, .10);
  color: #FFB07A;
}
.process--rail .step__name { color: var(--on-dark); }
.process--rail .step__text { color: var(--on-dark-mute); }

/* The connector is the base sheet's .step__body border-top. On the dark band
   the light-grey line reads as a hard white rule, so soften it to the dark
   hairline token. */
.section--dark .step__body { border-top-color: var(--on-dark-line); }

/* --- Stack: chips -------------------------------------------------------- */
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.stack li {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.8125rem 1.375rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--body);
  transition: border-color .2s var(--ease), color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}
.stack li:hover {
  border-color: rgba(255, 102, 0, .45);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* --- Founder cards ------------------------------------------------------- */
.founder {
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.founder:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* --- Contact form -------------------------------------------------------- */
.form:not(.form--plain) {
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.field input, .field select, .field textarea {
  border-radius: var(--radius-sm);
  background: #FCFCFD;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(255, 102, 0, .12);
}

.auth-card { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background:
    radial-gradient(46rem 26rem at 8% -20%, rgba(255, 102, 0, .10), transparent 62%),
    var(--ink-900);
}
.site-footer a { transition: color .2s var(--ease); }
.socials a {
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              transform .2s var(--ease);
}
.socials a:hover { background: rgba(255, 255, 255, .06); transform: translateY(-2px); }

/* --- Products page ------------------------------------------------------- */
.product {
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease);
}
.product:hover { box-shadow: var(--shadow-lg); }

/* --- Motion -------------------------------------------------------------- */
.js .reveal {
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .card:hover, .work-card:hover, .founder:hover,
  .stack li:hover, .socials a:hover { transform: none; }
  .card__media img, .work-card__shot { transition: none; }
  .card:hover .card__media img,
  .work-card:hover .work-card__shot { transform: none; }
}

/* ==========================================================================
   21. IMAGE SKELETONS

   The site is static HTML: the words are in the document and paint straight
   away, so there is nothing worth putting a skeleton over. The pictures are a
   different matter — the illustrations and product screenshots run to several
   megabytes between them and land long after the text around them.

   The shimmer is the <img>'s own background rather than a wrapper element.
   That is what lets it apply to every image on every page without touching a
   single line of markup: an image with nothing to draw shows its background,
   and covers it the instant it decodes.

   main.js sets data-img to loading / ready / failed.
   ========================================================================== */
@keyframes skel-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

img[data-img='loading'] {
  /* A white skeleton: near-white base, a hairline edge so the box still reads
     on a white section, and a pure-white sweep. */
  background-color: #F6F6F7;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, .95) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  box-shadow: inset 0 0 0 1px #ECECEE;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  border-radius: var(--radius);
  animation: skel-sweep 1.5s ease-in-out infinite;
}

/* The fade is what stops a heavy screenshot snapping in over the shimmer. */
img[data-img='ready'] {
  animation: skel-fade-in .45s var(--ease) both;
}

@keyframes skel-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* A broken image keeps the grey box so the layout holds, but stops shimmering.
   Shimmer means "coming"; nothing is coming. */
img[data-img='failed'] {
  background-color: #F6F6F7;
  box-shadow: inset 0 0 0 1px #ECECEE;
  background-image: none;
  animation: none;
}

/* The mark sits in the header and the footer at 32-36px. At that size a
   shimmering square is just a flicker in the corner of the eye. */
img.logo__mark[data-img],
img.stack__icon[data-img] {
  background: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  img[data-img='loading'] {
    background-image: none;
    animation: none;
  }
  img[data-img='ready'] { animation: none; }
}

/* ==========================================================================
   22. SIGN-IN MODAL
   A native <dialog> opened with showModal(): the browser puts it in the top
   layer, makes the rest of the page inert, and traps focus — so "you cannot
   interact with the background" is enforced by the platform, not by an
   overlay div that a keyboard user can tab straight past.
   ========================================================================== */
html.auth-locked { overflow: hidden; }
html { scrollbar-gutter: stable; }

.auth-modal {
  width: min(440px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 2rem 1.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--body);
  box-shadow: var(--shadow-xl);
  overscroll-behavior: contain;
}
.auth-modal[open] { animation: am-in .38s var(--ease) both; }
.auth-modal::backdrop {
  background: rgba(20, 22, 26, .55);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  animation: am-fade .3s ease both;
}
@keyframes am-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }

.auth-modal__close {
  position: absolute; top: .75rem; right: .75rem;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.auth-modal__close:hover { background: var(--surface); color: var(--ink); }

/* Side padding keeps a centred title clear of the close button in the top
   right corner — without it the longer titles ran underneath the ×. */
.auth-modal__head { text-align: center; margin-bottom: 1.25rem; }
.auth-modal:has(.auth-modal__close:not([hidden])) .auth-modal__head { padding-inline: 2rem; }
.auth-modal__logo { width: 40px; height: 40px; object-fit: contain; margin: 0 auto .75rem; display: block; }
.auth-modal__title { font-size: 1.375rem; margin: 0; }
.auth-modal__sub { margin: .5rem auto 0; font-size: var(--text-sm); color: var(--body); max-width: 34ch; }

/* Segmented Log in / Sign up control with a sliding pill */
.auth-tabs {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; margin-bottom: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.auth-tabs[hidden] { display: none; }
.auth-tabs button {
  position: relative; z-index: 1;
  padding: .55rem 0;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.auth-tabs button[aria-selected="true"] { color: var(--ink); }
.auth-tabs__pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease);
}
.auth-tabs[data-active="signup"] .auth-tabs__pill { transform: translateX(100%); }

.auth-view--in { animation: am-view .28s var(--ease) both; }
@keyframes am-view { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.auth-modal__notice {
  margin: 0 0 1rem; padding: .7rem .9rem;
  border-radius: var(--radius-sm); border: 1px solid;
  font-size: var(--text-sm);
}
.auth-modal__notice--error { background: #FEE4E2; border-color: #F3B4AE; color: #B42318; }
.auth-modal__notice--ok    { background: #E8F5EE; border-color: #A8DCC0; color: #1B7F4F; }
.auth-modal__notice--warn,
.auth-modal__notice--info  { background: #FFF6DC; border-color: #E8CE84; color: #9A6700; }

.auth-google {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem 1rem;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.auth-google:hover { border-color: #D0D3D9; box-shadow: var(--shadow-sm); }
.auth-google svg { width: 18px; height: 18px; flex: none; }

.auth-or {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0; color: var(--muted);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-field + .auth-field { margin-top: .9rem; }
.auth-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.auth-field label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.auth-field__control { position: relative; margin-top: .35rem; }
.auth-field input, .auth-field select {
  width: 100%;
  padding: .75rem .9rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: #FCFCFD;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.auth-field input[type="password"], .auth-field input[data-pw] { padding-right: 2.75rem; }
.auth-field__control:has(.auth-field__eye) input { padding-right: 2.75rem; }
.auth-field input:focus, .auth-field select:focus {
  outline: none; background: var(--white);
  border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 102, 0, .12);
}
.auth-field input[aria-invalid="true"] { border-color: var(--accent-dark); }
.auth-field__error { margin: .35rem 0 0; font-size: var(--text-sm); color: #B42318; }
.auth-field__eye {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; background: none; border-radius: 50%;
  color: var(--muted); cursor: pointer;
}
.auth-field__eye:hover { color: var(--ink); background: var(--surface); }
.auth-field__eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.auth-field__eye[aria-pressed="true"] { color: var(--accent-dark); }

.auth-req { color: var(--accent-dark); }
.auth-opt { font-family: var(--font-body); font-weight: 400; color: var(--muted); }
.auth-hint { margin: .35rem 0 0; font-size: var(--text-sm); color: var(--muted); }

.auth-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: 500;
  color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px;
}

.auth-submit {
  width: 100%;
  margin-top: 1.25rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1rem;
  border: 0; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #FF7A1A 0%, var(--accent) 100%);
  box-shadow: var(--shadow-accent);
  color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.auth-submit:hover { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%); }
.auth-modal button:disabled,
.auth-modal input:disabled,
.auth-modal select:disabled { opacity: .6; cursor: not-allowed; }
.auth-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  border-radius: 50%;
  animation: am-spin .7s linear infinite;
}
.auth-google .auth-spin { border-color: rgba(0, 0, 0, .15); border-top-color: var(--ink); }
@keyframes am-spin { to { transform: rotate(360deg); } }

.auth-foot, .auth-legal { margin: 1rem 0 0; text-align: center; font-size: var(--text-sm); }
.auth-legal { color: var(--muted); }
.auth-legal a { color: var(--accent-dark); }

.auth-signed {
  margin: 0 0 1rem; padding: .7rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline;
}
.auth-signed strong { color: var(--ink); word-break: break-all; }

.auth-done { text-align: center; padding: 1.5rem 0 .5rem; }
.auth-done__tick {
  width: 56px; height: 56px; margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 50%; background: #E8F5EE;
}
.auth-done__tick svg { width: 28px; height: 28px; fill: none; stroke: #17B26A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.auth-done__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0; }
.auth-done__text { margin: .4rem 0 0; font-size: var(--text-sm); }

/* Centred explicitly rather than relying on the UA stylesheet's margin:auto,
   which some mobile browsers drop once max-height kicks in. */
.auth-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
}
.auth-modal:focus, .auth-modal:focus-visible { outline: none; }

/* Phones: a compact version, so the whole form fits on one screen without
   scrolling inside the dialog. Inputs stay at 16px — anything smaller and
   iOS Safari zooms the page on focus, which is its own way of knocking the
   dialog off centre. */
@media (max-width: 480px) {
  .auth-modal {
    width: calc(100% - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    padding: 1.25rem 1rem 1rem;
  }
  .auth-modal__head { margin-bottom: .9rem; }
  .auth-modal__logo { width: 30px; height: 30px; margin-bottom: .45rem; }
  .auth-modal__title { font-size: 1.15rem; }
  .auth-modal__sub { font-size: .8125rem; margin-top: .3rem; }
  .auth-tabs { margin-bottom: .9rem; }
  .auth-tabs button { padding: .45rem 0; font-size: .875rem; }
  .auth-modal__notice { margin-bottom: .75rem; padding: .55rem .75rem; }
  .auth-google { padding: .65rem 1rem; font-size: .875rem; }
  .auth-or { margin: .75rem 0; }
  .auth-field + .auth-field { margin-top: .65rem; }
  .auth-field label { font-size: .8125rem; }
  .auth-field__control { margin-top: .25rem; }
  .auth-field input, .auth-field select { padding: .6rem .8rem; font-size: 16px; }
  .auth-hint { font-size: .75rem; margin-top: .25rem; }
  .auth-submit { margin-top: .9rem; padding: .75rem 1rem; }
  .auth-foot, .auth-legal { margin-top: .7rem; font-size: .8125rem; }
  .auth-signed { margin-bottom: .75rem; padding: .55rem .75rem; }
  .auth-done { padding: 1rem 0 .25rem; }
}

/* Short screens (small phones, landscape): drop the two things that only
   decorate — the logo and the supporting line — before anything useful. */
@media (max-width: 480px) and (max-height: 700px), (max-height: 560px) {
  .auth-modal__logo { display: none; }
  .auth-modal__sub { display: none; }
  .auth-modal__head { margin-bottom: .7rem; }
}

/* Hero headline on narrow phones. The markup keeps "software, websites"
   together with a non-breaking space, which at the 36px minimum is wider
   than a 360px screen and runs off the right edge. */
@media (max-width: 400px) {
  /* Fluid, not fixed: at a flat 1.95rem the unbreakable "software, websites"
     line is ~267px, wider than the column on a 320–360px phone. It then
     stretched the whole column past the right padding, and everything
     centred inside that column — the buttons included — sat off-centre on
     the screen. Scaling with the viewport keeps that line inside it. */
  .hero__title { font-size: clamp(1.6rem, 8.2vw, 1.95rem); }

  /* Small enough that both buttons stay on one centred line down to about
     340px; below that they wrap, and each line is still centred. */
  .hero__actions .btn {
    padding: 0.7rem 0.95rem;
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   23. COOKIE CONSENT
   Also a <dialog>, shown non-modally as a bottom banner while the visitor
   browses. If the sign-in modal opens before it is answered, consent.js
   re-shows it modally on top so it does not end up inert behind the wall.
   ========================================================================== */
.consent {
  position: fixed;
  inset: auto 1rem 1rem auto;
  width: min(420px, calc(100% - 2rem));
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--body);
  box-shadow: var(--shadow-xl);
  z-index: 300;
  animation: am-in .35s var(--ease) both;
}
.consent::backdrop { background: transparent; }
/* Focus lands on the banner container, not on a control, so there is nothing
   for an outline to point at. The buttons inside keep their own focus rings. */
.consent:focus, .consent:focus-visible { outline: none; }
.consent__title { font-size: 1rem; margin: 0 0 .4rem; }
.consent__text { margin: 0; font-size: var(--text-sm); }
.consent__text a { color: var(--accent-dark); }
.consent__manage { margin-top: .9rem; border-top: 1px solid var(--line); }
.consent__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--text-sm); cursor: pointer;
}
.consent__row strong { display: block; color: var(--ink); }
.consent__row small { display: block; color: var(--muted); }
.consent__row input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.consent__btn {
  flex: 1 1 auto;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  cursor: pointer;
}
.consent__btn--ghost { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.consent__btn--ghost:hover { border-color: #D0D3D9; }
.consent__btn--primary { background: var(--accent); border: 1px solid var(--accent); color: var(--white); }
.consent__btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.consent__btn[hidden] { display: none; }

@media (max-width: 560px) {
  .consent { inset: auto .75rem .75rem .75rem; width: auto; }
}

.site-footer__legal button[data-cookie-settings] {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.site-footer__legal button[data-cookie-settings]:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .auth-modal[open], .auth-modal::backdrop, .auth-view--in, .consent { animation: none; }
  .auth-tabs__pill { transition: none; }
}

/* ==========================================================================
   25. SERVICES AS A CHAIN
   Homepage only (.cards--orbit). Each service is a round picture with its text
   centred underneath. On phones they stack, joined by a dashed arrow pointing
   down; from 900px they sit in one row with the arrow pointing across, centred
   on the picture's middle in the gap between two columns.
   ========================================================================== */
.cards--orbit {
  gap: 0;
  max-width: 420px;
  margin-inline: auto;
}
.cards--orbit > .card {
  overflow: visible;
  align-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.cards--orbit > .card::after { display: none; }
.cards--orbit > .card:hover { transform: none; box-shadow: none; }

/* A dashed line with an arrowhead, in brand orange. */
.cards--orbit > .card + .card::before {
  content: "";
  display: block;
  width: 14px;
  height: 48px;
  margin: 0.75rem auto 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 48'%3E%3Cpath d='M7 0v38' stroke='%23FF6600' stroke-width='2' stroke-dasharray='6 6'/%3E%3Cpath d='M1 38l6 9 6-9z' fill='%23FF6600'/%3E%3C/svg%3E") center / 14px 48px no-repeat;
}

.cards--orbit .card__media {
  width: 220px;
  height: 220px;
  aspect-ratio: auto;
  padding: 1.75rem;
  border: 2px solid rgba(255, 102, 0, 0.3);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cards--orbit > .card:hover .card__media {
  transform: translateY(-4px);
  border-color: rgba(255, 102, 0, 0.55);
  box-shadow: var(--shadow-lg), 0 0 0 6px rgba(255, 102, 0, 0.06);
}
.cards--orbit .card__body { align-items: center; padding: 1.25rem 0 0; }
.cards--orbit .card__text { max-width: 34ch; }
.cards--orbit .card__list { border-top: 0; padding-top: 0; }
.cards--orbit .card__list li { padding-left: 0; }
.cards--orbit .card__list li::before {
  position: static;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

@media (min-width: 900px) {
  .cards--orbit {
    --chain-gap: 3rem;
    max-width: none;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--chain-gap);
  }
  .cards--orbit > .card + .card::before {
    position: absolute;
    top: 103px;                 /* half the 220px picture, less half the arrow */
    left: calc(var(--chain-gap) / -2 - 24px);
    width: 48px;
    height: 14px;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 14'%3E%3Cpath d='M0 7h38' stroke='%23FF6600' stroke-width='2' stroke-dasharray='6 6'/%3E%3Cpath d='M38 1l9 6-9 6z' fill='%23FF6600'/%3E%3C/svg%3E") center / 48px 14px no-repeat;
  }
}

/* ==========================================================================
   26. BUTTON SHINE
   The same highlight that crosses the logo, on the buttons: one slow pass,
   then a pause. It runs on the same 6.5s cycle, so a button next to the logo
   catches the light with it rather than on its own rhythm.

   White reads on the orange fills but would be invisible on a white outline
   button, so those get a faint orange tint instead.
   ========================================================================== */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(226, 232, 240, 0.22) 46%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(203, 213, 225, 0.30) 54%,
    transparent 60%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: logo-shine 6.5s linear infinite;
}

.btn--ghost::after {
  background-image: linear-gradient(
    115deg,
    transparent 40%,
    rgba(148, 163, 184, 0.16) 46%,
    rgba(203, 213, 225, 0.55) 50%,
    rgba(148, 163, 184, 0.16) 54%,
    transparent 60%
  );
}

@media (prefers-reduced-motion: reduce) {
  .btn::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   27. TECH RAIL
   The chips roll right to left. Same trick as the banner strip: two identical
   sets, the track slid by half its width, each set carrying its own trailing
   gap so that half is exact. Hovering stops it; reduced motion turns it into
   an ordinary scrollable row.
   ========================================================================== */
.stack-rail {
  overflow: hidden;
  margin-top: 1.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.stack-rail__track {
  display: flex;
  width: max-content;
  animation: rail-roll 42s linear infinite;
  will-change: transform;
}
.stack-rail:hover .stack-rail__track { animation-play-state: paused; }

.stack-rail .stack {
  flex-wrap: nowrap;
  margin: 0;
  padding-right: 1.25rem;   /* matches the chip gap, so half the track is exact */
}

/* One soft black for every logo: the row reads as a single set of chips
   rather than nine competing brand colours. */
.stack__icon {
  width: 26px;
  height: 26px;
  flex: none;
  opacity: 0.85;
}
.stack li:hover .stack__icon { opacity: 1; }

@keyframes rail-roll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .stack-rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .stack-rail__track { animation: none; }
  .stack-rail .stack[aria-hidden] { display: none; }
}

/* ==========================================================================
   28. PRODUCTS PAGE
   Each product is one card holding a screenshot and its copy. The screenshot
   is centred against the text rather than pinned to the top, which used to
   leave a tall empty patch under it whenever the copy ran long.
   ========================================================================== */
.product__body { min-width: 0; }
.product .card__list { padding-top: 1.125rem; }

/* The pricing note is an aside, not part of the pitch, so it sits in its own
   quiet block instead of running on from the buttons. */
.product__note {
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--body);
  max-width: 52ch;
}

/* Cards written as a heading and a paragraph, with no .card__body wrapper,
   had nothing to hold their text off the border. */
.card:not(:has(.card__body)) {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Four cards in a three-column grid leave one stranded on its own row. */
@media (min-width: 960px) {
  .cards:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}