/* Provenio Ltd — production stylesheet.
   All values are taken verbatim from the approved design (design-reference/Main.dc.html). */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: #F5F3EE; }
h1, h2, h3, p { margin: 0; }

a { color: #7A5C2E; }
a:hover { color: #4F3B1C; }

.page {
  font-family: 'Archivo', sans-serif;
  color: #1C232B;
  background: #F5F3EE;
  min-height: 100vh;
}

.container { max-width: 1200px; margin: 0 auto; }

.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-32 { display: flex; flex-direction: column; gap: 32px; }
.stack-56 { display: flex; flex-direction: column; gap: 56px; }

[role="list"] { list-style: none; margin: 0; padding: 0; }

/* Accessibility helpers (invisible unless used) */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: #F5F3EE; color: #0E1620; padding: 12px 16px;
  font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 600;
}
.skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Shared type ---------- */
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #7A5C2E;
}
.eyebrow--light { color: #C9A56A; }

.section-title {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
}

.section { padding: 104px 24px; }
.section--white { background: #FFFFFF; border-top: 1px solid #E4E0D6; border-bottom: 1px solid #E4E0D6; }
.section--dark { background: #0E1620; color: #F5F3EE; }
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }

/* ---------- Header ---------- */
.site-header { background: #0E1620; padding: 0 24px; }
.header-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 0; border-bottom: 1px solid #243140;
}
.brand, .brand:hover {
  display: flex; align-items: center;
  text-decoration: none; color: #F5F3EE;
  font-size: 22px; font-weight: 600; letter-spacing: 0.22em;
}
.brand svg { margin: 0 0.18em 0 0.02em; }

.nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 14px; letter-spacing: 0.06em; }
.nav a { color: #D9D4C7; text-decoration: none; }
.nav a:hover { color: #FFFFFF; }

/* ---------- Hero ---------- */
.hero { background: #0E1620; color: #F5F3EE; padding: 96px 24px 112px; }
.hero__title {
  font-family: 'Newsreader', serif; font-weight: 400;
  font-size: clamp(40px, 6vw, 76px); line-height: 1.05; max-width: 900px;
}
.hero__lede { font-size: 19px; line-height: 1.6; color: #B9C0C8; max-width: 640px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }

.cta {
  color: #0E1620; text-decoration: none; background: #B08D57;
  padding: 16px 28px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
}
.cta:hover { color: #0E1620; background: #C9A56A; }

.ghost {
  color: #F5F3EE; text-decoration: none; border: 1px solid #5A6674;
  padding: 15px 28px; font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
}
.ghost:hover { color: #FFFFFF; border-color: #FFFFFF; }

/* ---------- About ---------- */
.split { display: flex; flex-wrap: wrap; gap: 64px; }
.split__intro { flex: 1 1 320px; }
.split__body {
  flex: 1.4 1 420px; display: flex; flex-direction: column; gap: 20px;
  font-size: 17px; line-height: 1.7; color: #3A444F;
}

/* ---------- Services ---------- */
.services { display: flex; flex-wrap: wrap; gap: 32px; }
.service {
  flex: 1 1 360px; background: #F5F3EE; padding: 40px;
  display: flex; flex-direction: column; gap: 20px;
}
.service--dark { background: #0E1620; color: #F5F3EE; }
.service__title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 28px; }
.service__list {
  display: flex; flex-direction: column; gap: 14px;
  font-size: 16px; line-height: 1.6; color: #3A444F;
}
.service--dark .service__list { color: #C4CAD1; }
.service__list li { display: flex; gap: 14px; }
.service__num { color: #7A5C2E; font-weight: 600; }
.service--dark .service__num { color: #C9A56A; }

/* ---------- Sectors ---------- */
.sectors { display: flex; flex-wrap: wrap; gap: 1px; background: #D8D3C7; border: 1px solid #D8D3C7; }
.sector {
  flex: 1 1 300px; background: #F5F3EE; padding: 32px;
  display: flex; flex-direction: column; gap: 10px;
}
.sector h3 { font-size: 18px; font-weight: 600; }
.sector p { font-size: 15px; line-height: 1.6; color: #4A5460; }

/* ---------- Approach ---------- */
.principles { display: flex; flex-wrap: wrap; gap: 48px; }
.principle {
  flex: 1 1 280px; display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid #B08D57; padding-top: 24px;
}
.principle h3 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 24px; }
.principle p { font-size: 16px; line-height: 1.65; color: #B9C0C8; }

/* ---------- Contact ---------- */
.contact { display: flex; flex-wrap: wrap; gap: 64px; }
.contact__intro { flex: 1 1 380px; display: flex; flex-direction: column; gap: 20px; }
.contact__text { font-size: 17px; line-height: 1.7; color: #3A444F; max-width: 460px; }
.contact__location {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid #B08D57; padding-top: 24px; margin-top: 16px; max-width: 460px;
}
.contact__label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #6B6457; }
.contact__address { font-style: normal; font-size: 17px; line-height: 1.6; }

.contact__panel { flex: 1 1 420px; background: #FFFFFF; border: 1px solid #E4E0D6; padding: 40px; }
/* Responsive guard: below ~455px the design's panel and fields refuse to shrink under
   their controls' intrinsic widths, causing horizontal page overflow. Scoped to small
   screens so the approved layout is untouched wherever it already fits. */
@media (max-width: 480px) {
  .contact__panel,
  .field-row .field,
  .field select { min-width: 0; }
}

/* Success state — shown by main.js (.is-sent) or, without JavaScript, via the #enquiry-sent redirect target */
.enquiry-sent { display: none; flex-direction: column; gap: 14px; padding: 24px 0; outline: none; }
.enquiry-sent p { font-size: 16px; line-height: 1.65; color: #3A444F; }
.enquiry-sent__title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 28px; }
.contact__panel.is-sent .enquiry-sent,
.enquiry-sent:target { display: flex; }
.contact__panel.is-sent .enquiry,
.enquiry-sent:target + .enquiry { display: none; }

.enquiry { display: flex; flex-direction: column; gap: 20px; }
.enquiry__title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 26px; }
.field-row { display: flex; flex-wrap: wrap; gap: 20px; }
.field {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; font-weight: 500; color: #3A444F;
}
.field-row .field { flex: 1 1 200px; }
.field input,
.field select,
.field textarea {
  font: inherit; font-size: 16px; font-weight: 400;
  padding: 12px 14px; border: 1px solid #C9C3B6; background: #FBFAF7; color: #1C232B;
}
.field textarea { resize: vertical; }
.field [aria-invalid="true"] { border-color: #7A5C2E; }

.enquiry__error { display: none; font-size: 15px; line-height: 1.6; color: #7A5C2E; outline: none; }
.enquiry__error.is-visible,
.enquiry__error:target { display: block; }

.enquiry__submit {
  align-self: flex-start; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  background: #0E1620; color: #F5F3EE; border: none; padding: 16px 32px; cursor: pointer;
}
.enquiry__submit[disabled] { cursor: progress; }

/* Privacy line under the submit button — uses the design's small-label type */
.enquiry__privacy { font-size: 13px; line-height: 1.6; color: #6B6457; }

/* Privacy notice page — body copy reuses the About section's text styles */
.legal {
  display: flex; flex-direction: column; gap: 20px; max-width: 720px;
  font-size: 17px; line-height: 1.7; color: #3A444F;
}
.legal h2 {
  margin-top: 16px; font-family: 'Newsreader', serif; font-weight: 500; font-size: 24px; color: #1C232B;
}

/* Spam honeypot — kept out of view and out of the accessibility tree */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- SweetAlert2 theme (dialogs & toasts) ----------
   Uses only the design's palette, typefaces and square corners.
   Selectors are doubled-up to outrank sweetalert2.min.css, which loads later. */
.swal2-container .swal2-popup.pv-swal {
  border-radius: 0; background: #FFFFFF; color: #1C232B;
  border: 1px solid #E4E0D6; padding: 40px 32px 32px;
  font-family: 'Archivo', sans-serif;
}
.swal2-popup.pv-swal .pv-swal__title {
  padding: 0; font-family: 'Newsreader', serif; font-weight: 500; font-size: 28px; color: #1C232B;
}
.swal2-popup.pv-swal .pv-swal__text {
  margin: 14px 0 0; padding: 0; font-size: 16px; line-height: 1.65; color: #3A444F;
}
.swal2-popup.pv-swal .pv-swal__icon { margin: 0 auto 20px; }
.swal2-popup.pv-swal .swal2-actions { margin-top: 28px; }
.swal2-popup.pv-swal .pv-swal__button {
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  background: #0E1620; color: #F5F3EE; border: none; border-radius: 0; padding: 16px 32px; cursor: pointer;
}
.swal2-popup.pv-swal .pv-swal__button:focus-visible { outline: 2px solid #B08D57; outline-offset: 3px; }
.swal2-container.swal2-backdrop-show { background: rgba(14, 22, 32, 0.6); }

.swal2-container .swal2-popup.swal2-toast.pv-toast {
  border-radius: 0; background: #0E1620; color: #F5F3EE;
  border-left: 3px solid #B08D57; box-shadow: none;
  font-family: 'Archivo', sans-serif; padding: 14px 18px;
}
.swal2-popup.pv-toast .pv-toast__title { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: #F5F3EE; }
.swal2-popup.pv-toast .pv-toast__text { font-size: 14px; line-height: 1.5; color: #B9C0C8; }
.swal2-popup.pv-toast .swal2-timer-progress-bar { background: #B08D57; }

/* ---------- Footer ---------- */
.site-footer { background: #0E1620; color: #8E97A1; padding: 40px 24px; }
.footer-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 13px; letter-spacing: 0.04em;
}