/**
 * Zitro — public site.
 *
 * The palette is not invented here: it is the Zitro admin skin
 * (ptfv/src/styles/skins/_zitro.scss) copied across so the marketing site and
 * the product a client logs into afterwards look like the same company.
 *
 * Every surface is light and warm — off-white, near-white, and a lemon band
 * for emphasis — with brown type on all of them. The first cut alternated with
 * a deep roast brown and it read as heavy, and muted text on it lost contrast
 * badly. Inverting keeps the brand's warmth without asking anyone to read pale
 * grey on near-black. Yellow is a surface and an accent, never a text colour.
 */

:root {
  /* ─── Brand (from the Zitro skin) ─────────────────── */
  --c-primary:        #FFD93D;
  --c-primary-dark:   #F2A93C;
  --c-primary-light:  #FFEF9A;
  /* Darkened from the skin's #A06A10, which measured 4.0:1 on the lemon band —
     under the 4.5 a 12px uppercase label needs. This is 5.6:1 there and better
     on every other surface. */
  --c-primary-darker: #82540A;
  --c-primary-rgb:    255, 217, 61;

  /* ─── Surfaces ────────────────────────────────────── */
  --c-bg:        #FFF9EC;
  --c-surface:   #FFFDF7;
  --c-roast:     #2A1F0A;   /* deep warm brown — now type, not background */
  --c-lemon:     #FFEF9A;   /* the emphasis band: light lemon from the brand skin */
  --c-lemon-2:   #FFF6CE;   /* one step softer, for the footer */

  /* ─── Text ────────────────────────────────────────── */
  --c-text:        #2A1F0A;
  /* 0.58 measured about 4.3:1 on cream — under the 4.5 minimum for body text,
     which is exactly what made the footer blurb hard to read. */
  --c-text-muted:  rgba(72, 54, 16, 0.76);

  --c-border:      rgba(180, 140, 40, 0.16);
  --c-border-dark: rgba(255, 217, 61, 0.18);

  --gradient-primary: linear-gradient(180deg, #F2A93C 0%, #FFD93D 100%);

  --shadow-soft:  0 4px 14px rgba(242, 169, 60, 0.10), 0 2px 6px rgba(242, 169, 60, 0.06);
  --shadow-lift:  0 10px 28px rgba(242, 169, 60, 0.18), 0 4px 10px rgba(242, 169, 60, 0.08);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* One number drives every gutter, so the whole page breathes together. */
  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(56px, 7vw, 112px);
  /* One scale, used everywhere. Pills read as consumer-app buttons; a small
     radius reads as a company that moves money. */
  --radius-sm: 6px;    /* inputs, chips, small controls */
  --radius:    8px;    /* buttons */
  --radius-lg: 12px;   /* cards, panels, the cookie bar */
}

/* ─────────────────────────── base ─────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The grey-blue rectangle a mobile browser paints over whatever you tap. It
     ignores our border radius, so it flashes a hard-edged box over round-
     cornered buttons and looks like a rendering fault. Suppressed site-wide.
     This removes only the *touch* feedback — :focus-visible below still draws
     a real ring for anyone navigating by keyboard, and buttons keep their own
     hover and active states, so nothing is left without feedback. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  /* Belt and braces. The marquee is clipped by its own wrapper — relying on
     this alone is unreliable, iOS Safari in particular. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }

p { margin: 0; }

::selection { background: var(--c-primary); color: var(--c-roast); }

:focus-visible {
  outline: 3px solid var(--c-primary-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section-y) 0; }

/* The emphasis band. Same brown type as everywhere else — only the surface
   changes, so nothing has to be re-checked for contrast. */
.section--accent {
  background: var(--c-lemon);
  color: var(--c-text);
}

.section--surface { background: var(--c-surface); }

/* A small uppercase kicker above a heading — the sample's "welcome" / "our
   services" labels, which do a lot of work for very little ink. */
.kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-primary-darker);
  margin-bottom: 18px;
}

.section--accent .kicker { color: var(--c-primary-darker); }

.lede {
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.muted { color: var(--c-text-muted); }
.section--accent .muted { color: rgba(72, 54, 16, 0.78); }

/* ─────────────────────────── header ─────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 249, 236, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
}

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

@media (min-width: 760px) { .site-header__inner { gap: 24px; min-height: 78px; } }

/* On a phone the call-to-action and the burger fight for the same few pixels
   and the header pushes the whole document 3px wide. The menu carries the same
   link and the address, so the button stands down rather than the menu. */
.site-header .btn { display: none; }

@media (min-width: 760px) { .site-header .btn { display: inline-flex; } }

.brand { display: flex; align-items: center; margin-right: auto; }

/* The real logo, so the drawn letterforms survive. It is the brand file with
   only the word recoloured brown (assets/img/logo-word-dark.png): the original
   yellow lettering sits on cream at about 1.3:1 and cannot be read. The fruit
   keeps its colour. */
.brand__logo { height: 34px; width: auto; }

@media (min-width: 760px) { .brand__logo { height: 38px; } }

/* The header carried the email and the postal address next to the logo. At
   anything under a wide desktop it crowded the button and the burger, and it
   duplicated the footer and the contact page. Removed; the CTA is the header's
   job. */

/* ─────────────────────────── buttons ─────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 48px tall and never narrower than a thumb — this is the one element a
     phone user is meant to hit. */
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn--primary {
  background: var(--gradient-primary);
  color: var(--c-roast);
  box-shadow: var(--shadow-soft);
}

.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* Something has to acknowledge a tap now that the browser's own flash is gone. */
.btn:active { transform: translateY(1px); }
.rail-btn:active, .menu-toggle:active { transform: scale(0.96); }

.btn--ghost {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
}

.btn--ghost:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-roast); }

.btn__arrow { transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* A slow sheen across the primary buttons. Seven seconds apart and gone in
   under one, so it catches the eye at the edge of vision without ever being
   the thing you are looking at. It is decoration on top of a button that is
   already legible, so it can be switched off entirely without loss. */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%);
  transform: translateX(-120%);
  animation: sheen 7s ease-in-out infinite;
}

/* Pointing at it is deliberate attention; the nudge has done its job. */
.btn--primary:hover::after { animation-play-state: paused; }

@keyframes sheen {
  0%, 82%  { transform: translateX(-120%); }
  92%      { transform: translateX(120%); }
  100%     { transform: translateX(120%); }
}

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

/* ─────────────────────────── menu ─────────────────────────── */

.menu-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 12px 0;
  min-height: 48px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}

.menu-toggle__bars { display: grid; gap: 5px; width: 30px; }
.menu-toggle__bars span { height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }

body.menu-open .menu-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--c-lemon);
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
  overflow-y: auto;
}

body.menu-open .menu { opacity: 1; visibility: visible; transform: none; }
body.menu-open { overflow: hidden; }

.menu__list { display: grid; gap: 6px; margin: 0 0 48px; padding: 0; list-style: none; }

.menu__link {
  display: inline-block;
  padding: 8px 0;
  font-size: clamp(34px, 8vw, 76px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  transition: color .2s ease, transform .2s ease;
}

.menu__link:hover { color: var(--c-primary-darker); transform: translateX(10px); }

.menu__foot { display: grid; gap: 8px; font-size: 14px; color: var(--c-text-muted); }
.menu__foot a:hover { color: var(--c-primary-darker); }

/* ─────────────────────────── hero ─────────────────────────── */

.hero { padding-top: clamp(40px, 7vw, 90px); }

.hero__grid {
  display: grid;
  gap: 28px;
  padding-bottom: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid var(--c-border);
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; }
}

/* Same two columns as the hero, without the hero's closing rule and the
   padding that goes with it — reusing .hero__grid for ordinary sections left
   a couple of hundred pixels of dead space under every one of them. */
.split { display: grid; gap: 24px; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; }
}

/* Clips the oversized wordmark. Without a wrapper that actually crops it, the
   document itself becomes 1800px wide and a phone scrolls sideways. */
.marquee-wrap { overflow: hidden; }

/* The oversized wordmark that slides across the page. Two identical tracks
   sit side by side and the pair is translated by exactly half its width, so
   the loop has no seam and no JavaScript. */
.marquee {
  display: flex;
  width: max-content;
  padding: clamp(18px, 3vw, 40px) 0;
  animation: marquee 26s linear infinite;
}

.marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 0.3em;
  padding-right: 0.3em;
  font-size: clamp(64px, 15vw, 210px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-roast);
}

.marquee__track em { font-style: normal; color: var(--c-primary-dark); }

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

@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
}

/* ─────────────────────────── numbered blocks ─────────────────────────── */

.pillars { display: grid; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; }

@media (min-width: 760px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar { background: var(--c-surface); padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; }
.pillar__no { font-size: 13px; font-weight: 800; letter-spacing: 0.2em; color: var(--c-primary-dark); }
.pillar__title { font-size: 19px; font-weight: 800; }
.pillar__text { font-size: 15px; color: var(--c-text-muted); }

/* ─────────────────────────── capability cards ─────────────────────────── */

/* auto-fit rather than a fixed column count: a group of four then fills the
   row instead of leaving the fourth card stranded on a line of its own. */
.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  gap: 12px;
  align-content: start;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--c-primary-dark); }

.section--accent .card {
  background: var(--c-surface);
  border-color: rgba(160, 106, 16, 0.22);
}

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
  color: var(--c-roast);
  font-weight: 800;
}

.card__title { font-size: 19px; font-weight: 800; }
.card__text { font-size: 15px; color: var(--c-text-muted); }
.section--accent .card__text { color: var(--c-text-muted); }

/* ─────────────────────────── carousel ─────────────────────────── */

/* Scroll-snap rather than a slider library: it is a row of cards that can be
   swiped on a phone and nudged with buttons on a desktop, and it keeps
   working with JavaScript disabled. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 34%);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  padding-bottom: 12px;
  scrollbar-width: thin;
}

.rail > * { scroll-snap-align: start; }

@media (max-width: 720px) { .rail { grid-auto-columns: 84%; } }

.rail-nav { display: flex; gap: 10px; margin-top: 22px; }

.rail-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  border: 1.5px solid currentColor;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}

.rail-btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-roast); }
.rail-btn[disabled] { opacity: .35; cursor: default; }
.rail-btn[disabled]:hover { background: none; color: inherit; border-color: currentColor; }

/* ─────────────────────────── contact ─────────────────────────── */

.contact-grid { display: grid; gap: 40px; }

@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }

.field { display: grid; gap: 8px; margin-bottom: 18px; }

.field label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-muted); }

.field input, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
  color: var(--c-text);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.field textarea { min-height: 150px; resize: vertical; }

.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-primary-dark);
  box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), 0.22);
}

/* Bots fill in everything they can see; this one is invisible to people and
   its being filled is the tell. */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { margin-top: 14px; font-size: 15px; min-height: 24px; }
.form-note--ok { color: #4D7C0F; font-weight: 700; }
.form-note--bad { color: #DC2626; font-weight: 700; }

.detail-list { display: grid; gap: 22px; }
.detail-list dt { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-primary-darker); margin-bottom: 4px; }
.detail-list dd { margin: 0; font-size: 17px; font-weight: 600; }

/* ─────────────────────────── prose (legal pages) ─────────────────────────── */

.prose { max-width: 78ch; }
.prose h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 48px 0 14px; }
.prose h3 { font-size: 19px; margin: 30px 0 10px; }
.prose p, .prose li { font-size: 16px; color: var(--c-text-muted); }
.prose p + p { margin-top: 14px; }
.prose ul { margin: 12px 0; padding-left: 20px; display: grid; gap: 8px; }
.prose strong { color: var(--c-text); }

/* ─────────────────────────── footer ─────────────────────────── */

/* A softer lemon than the emphasis band so the two do not merge where a CTA
   section sits directly above the footer. */
.site-footer { background: var(--c-lemon-2); color: var(--c-text); padding: clamp(56px, 7vw, 100px) 0 40px; border-top: 1px solid var(--c-primary-border); }

.footer-grid { display: grid; gap: 42px; }

@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 60px; } }

.footer-logo { height: 46px; width: auto; margin-bottom: 20px; }

.footer-col h3 { font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-primary-darker); margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { color: var(--c-text-muted); }
.footer-col a:hover { color: var(--c-primary-darker); }

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--c-primary-border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--c-text-muted);
}

/* ─────────────────────────── language switch ─────────────────────────── */

/* Present from day one so adding a second language is a data change, not a
   layout change. It hides itself while only one language exists. */
.lang {
  position: relative;
  display: none;
}

.lang[data-multi="true"] { display: block; }

.lang__btn {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  background: none; border: 1.5px solid var(--c-border); border-radius: var(--radius);
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: inherit; cursor: pointer;
}

.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 168px; padding: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  display: none;
  z-index: 70;
}

.lang.is-open .lang__menu { display: grid; }

.lang__opt {
  display: block; width: 100%;
  padding: 10px 12px;
  background: none; border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: 15px; text-align: left; color: var(--c-text); cursor: pointer;
}

.lang__opt:hover { background: rgba(var(--c-primary-rgb), 0.18); }
.lang__opt[aria-current="true"] { font-weight: 800; }

/* ─────────────────────────── cookie notice ─────────────────────────── */

.cookie {
  position: fixed;
  left: 50%; bottom: 20px;
  transform: translateX(-50%) translateY(140%);
  z-index: 80;
  width: min(760px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-primary-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.cookie.is-shown { transform: translateX(-50%) translateY(0); }
.cookie p { flex: 1 1 220px; font-size: 14px; }

@media (max-width: 560px) { .cookie { border-radius: var(--radius); } }

/* ─────────────────────────── reveal on scroll ─────────────────────────── */

/* Hidden only once JavaScript has announced itself — the `js` class is set by
   an inline script in <head>. Without it the animation never arms, and a page
   whose scripts failed to load still shows every word. An effect must not be
   able to make content disappear. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Until the translation layer has painted, text nodes still hold their build-
   time English. That is the right fallback, so nothing is hidden here — the
   page is readable even if the JSON never loads. */