/* ==========================================================================
   Marabez Consulting — Site Styles
   Design tokens come from /assets/tokens/tokens.css (loaded first).
   Never hardcode a hex value here; use the token so the WCAG-checked
   contrast ratios in design-system.md continue to hold.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }

ul, ol { list-style: none; }

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

button, input, textarea { font: inherit; color: inherit; }


/* --- Base ----------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type scale — design-system.md. Fluid between mobile and the desktop values. */

h1 {
  font-size: clamp(2rem, 1.45rem + 2.4vw, 3rem);   /* 32 -> 48px */
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 1.28rem + 0.95vw, 2rem); /* 24 -> 32px */
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h3 {
  font-size: 1.375rem;                              /* 22px */
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}

h4 {
  font-size: 1.0625rem;                             /* 17px */
  line-height: 1.35;
  font-weight: 600;
}

p { max-width: 68ch; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--emerald-100);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms ease, color 150ms ease;
}

a:hover {
  color: var(--emerald-800);
  text-decoration-color: var(--emerald-500);
}

strong { font-weight: 600; }

/* Visible, high-contrast focus ring on every interactive element (WCAG 2.2). */
:focus-visible {
  outline: 2px solid var(--emerald-700);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* --- Layout primitives ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: clamp(56px, 4rem + 3vw, 104px); }

/* Surface fill used to separate major sections without adding borders. */
.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.section__head { margin-bottom: 48px; }

.section__head p {
  margin-top: 16px;
  color: var(--secondary);
  font-size: 1.0625rem;
}

/* Long-form reading measure — design-system.md caps this at ~680px. */
.prose { max-width: 680px; }

.prose p + p { margin-top: 16px; }

/* Small utilities — kept minimal so no inline style attributes are needed
   and the Content-Security-Policy can stay strict on style-src. */
.mt-24 { margin-top: 24px; }

.lead { color: var(--secondary); font-size: 1.0625rem; }

.eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--emerald-700);
  font-family: var(--font-mono);
  font-size: 0.75rem;                               /* 12px */
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--emerald-700);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 150ms ease;
}

.skip-link:focus { top: 8px; color: #fff; }


/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;                                 /* touch target */
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.btn--primary {
  background: var(--emerald-700);
  color: #fff;
}

.btn--primary:hover {
  background: var(--emerald-800);
  color: #fff;
}

.btn--secondary {
  background: var(--canvas);
  border-color: var(--border);
  color: var(--ink);
}

.btn--secondary:hover {
  border-color: var(--muted);
  color: var(--ink);
}

.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Ghost/text link with a trailing arrow — used for the cross-page bridges. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}


/* --- Header & navigation -------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}

.site-header__logo { display: flex; align-items: center; }

/* The logo SVG carries ~33% empty viewBox above and below the mark, so the
   rendered lockup reads smaller than its box height. 48px puts the mark at
   roughly 32px and the wordmark at ~18px, which holds its own against the
   hero H1 instead of floating above it. */
.site-header__logo img { height: 48px; width: auto; }

.nav { display: flex; align-items: center; gap: 8px; }

/* :not(.btn) matters. Without it these rules out-specify .btn--primary
   (0,1,1 vs 0,1,0) and repaint the header CTA's text grey instead of white.
   Every button on the site must read the same: emerald fill, white text. */
.nav a:not(.btn) {
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.nav a:not(.btn):hover { color: var(--ink); background: var(--surface-2); }

.nav a:not(.btn)[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav__cta { margin-left: 8px; }


/* --- Hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(64px, 4rem + 6vw, 128px); }

.hero h1 { max-width: 20ch; }

.hero__support {
  max-width: 62ch;
  margin-top: 24px;
  color: var(--secondary);
  font-size: 1.125rem;
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

/* Supporting notes (e.g. the privacy-notice line) drop to their own row
   rather than sitting alongside the button. */
.hero__actions .note { flex-basis: 100%; margin-top: 4px; }


/* --- Card grid ------------------------------------------------------------ */

.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  padding: 32px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.card h3 { margin-bottom: 12px; }

.card p { color: var(--secondary); max-width: none; }

/* The AI Transformation card spans the full row so its required ATDS bridge
   sits directly on the card, never wrapped away from it. */
.card--bridge { grid-column: 1 / -1; }

.bridge {
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--emerald-50);
  border: 1px solid var(--emerald-100);
  border-left: 3px solid var(--emerald-700);
  border-radius: var(--radius);
}

.bridge p { color: var(--ink); max-width: 72ch; }

.bridge__cta { margin-top: 12px; }


/* --- IEOS method diagram -------------------------------------------------- */

.method__definition {
  max-width: 720px;
  margin-bottom: 48px;
  font-size: 1.125rem;
  line-height: 1.6;
}

.phases {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: phase;
}

.phase {
  position: relative;
  padding: 24px;
  padding-top: 28px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Numbered marker doubles as the visual "flow" cue on wide viewports. */
.phase::before {
  counter-increment: phase;
  content: counter(phase, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--emerald-700);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.phase h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.phase p {
  color: var(--secondary);
  font-size: 0.9375rem;
  max-width: none;
}

.method__link { margin-top: 40px; }

.method__link p { font-size: 1.0625rem; }


/* --- FAQ accordion -------------------------------------------------------- */
/* Built on <details>/<summary>: keyboard accessible and fully functional
   with no JavaScript. */

.faq { max-width: 800px; }

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__item:first-of-type { border-top: 1px solid var(--border); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q:hover { color: var(--emerald-800); }

/* Plus/minus affordance drawn in CSS — no icon dependency. */
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  background:
    linear-gradient(var(--emerald-700), var(--emerald-700)) center / 14px 2px no-repeat,
    linear-gradient(var(--emerald-700), var(--emerald-700)) center / 2px 14px no-repeat;
  transition: transform 150ms ease;
}

.faq__item[open] .faq__q::after {
  background: linear-gradient(var(--emerald-700), var(--emerald-700)) center / 14px 2px no-repeat;
}

.faq__a {
  padding: 0 4px 24px;
  color: var(--secondary);
}

.faq__a p { max-width: 72ch; }


/* --- Contact form --------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
}

.form { display: grid; gap: 20px; }

.field { display: grid; gap: 8px; }

.field label { font-size: 0.9375rem; font-weight: 500; }

.field .hint { color: var(--secondary); font-size: 0.875rem; }

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field input:hover,
.field textarea:hover { border-color: var(--muted); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--emerald-700);
  box-shadow: 0 0 0 3px var(--emerald-50);
}

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

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B42318; }

.field__error {
  color: #B42318;
  font-size: 0.875rem;
  font-weight: 500;
}

.field__error:empty { display: none; }

/* Honeypot — visually and programmatically removed from the tab order for
   real visitors, but still present in the DOM for bots to fill in. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.form__status {
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.form__status:empty { display: none; }

.form__status[data-state="success"] {
  background: var(--emerald-50);
  border: 1px solid var(--emerald-100);
  color: var(--emerald-800);
}

.form__status[data-state="error"] {
  background: #FEF3F2;
  border: 1px solid #FECDCA;
  color: #B42318;
}

.form__footnote { color: var(--muted); font-size: 0.8125rem; }

/* --- No-JavaScript outcome banners --------------------------------------- */
/* Revealed only by the URL fragment the function redirects to, so they stay
   invisible on the JS path (which never navigates) and on a normal page load.
   :target still matches while the element is display:none, so the rule below
   is what brings it back into flow. */

.form-result {
  display: none;
  margin-bottom: 32px;
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
}

.form-result:target { display: block; }

.form-result p { max-width: 68ch; }

.form-result--ok {
  background: var(--emerald-50);
  border-color: var(--emerald-100);
  color: var(--emerald-800);
}

.form-result--bad {
  background: #FEF3F2;
  border-color: #FECDCA;
  color: #B42318;
}

/* tabindex="-1" lets the browser move the focus starting point to the banner
   on arrival, so the next Tab continues from the message rather than the top
   of the document. Suppress the ring: a full-page redirect should not look
   like a keyboard focus event. */
.form-result:focus { outline: none; }

/* --- Long-form document page (privacy notice) ----------------------------- */
/* Reading measure is the 680px from design-system.md. The global reset strips
   list markers, so they are restored here rather than site-wide — these are
   the only real prose lists on the site. */

.doc { max-width: 680px; }

.doc h1 { margin-bottom: 24px; }

.doc h2 {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.doc h3 { margin-top: 40px; }

.doc p,
.doc ul,
.doc ol,
.doc address { margin-top: 16px; }

.doc h2 + p,
.doc h3 + p,
.doc h2 + ul,
.doc h3 + ul { margin-top: 16px; }

.doc ul,
.doc ol {
  padding-left: 24px;
  color: var(--secondary);
}

.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }

.doc li { margin-top: 8px; }

.doc li::marker { color: var(--muted); }

.doc address {
  font-style: normal;
  padding-left: 20px;
  border-left: 2px solid var(--emerald-100);
  color: var(--secondary);
}

.doc__entity { color: var(--ink); }

.doc__date { color: var(--secondary); font-size: 0.9375rem; }


/* --- Callout (used for the "note line" captions) -------------------------- */

.note {
  margin-top: 20px;
  color: var(--secondary);
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 72ch;
}

.placeholder-link {
  color: var(--muted);
  font-size: 0.875rem;
}


/* --- Definition list style used for "What you'll receive" ----------------- */

.deliverables { display: grid; gap: 20px; max-width: 760px; margin-top: 32px; }

.deliverables > div {
  padding-left: 20px;
  border-left: 2px solid var(--emerald-100);
}

.deliverables dt { font-weight: 600; margin-bottom: 4px; }

.deliverables dd { color: var(--secondary); margin: 0; }


/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--dark-bg);
  color: var(--dark-secondary);
  padding-block: 56px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-footer img { height: 42px; width: auto; }

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 0.875rem;
}

.site-footer a { color: var(--dark-emerald); text-decoration-color: transparent; }

.site-footer a:hover { color: var(--dark-emerald); text-decoration-color: var(--dark-emerald); }

.site-footer .placeholder-link { color: var(--dark-secondary); }

.site-footer :focus-visible { outline-color: var(--dark-emerald); }


/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 640px) {
  .site-header__inner { min-height: 72px; }
  .site-header__logo img { height: 38px; }
  .nav { gap: 2px; }
  .nav a:not(.btn) { padding: 8px; font-size: 0.875rem; }
  .nav__cta { display: none; }        /* CTA repeats in-page; avoids crowding */
  .card { padding: 24px; }
  .hero__actions .btn { width: 100%; }
}